CSS Grid генераторы
Бағандар мен жолдарды орнатыңыз, элементтерді орналастыру үшін ұяшықтар бойымен тартыңыз және бір басумен сәйкес HTML коды бар CSS тор кодын көшіріп алыңыз.
Тор тікелей браузеріңізде жасалады. Мұнда орнатқан ештеңе BroBroGo серверіне жүктелмейді.
Жиі қойылатын сұрақтар
Торға элементтерді қалай орналастырамын?
Тіктөртбұрышты белгілеу үшін ұяшықтар бойымен басып, тартыңыз — жіберген кезде ол сол бағандар мен жолдарды қамтитын орналастырылған еншілес элементке айналады. Сіз салған әрбір элемент CSS-те өзінің жеке grid-column және grid-row ережесін және HTML-де сәйкес div алады. Элементтер бір-бірінің үстіне түсуі мүмкін, бұл ретте кейінірек салынғаны үстінде орналасады; элементті жою үшін оның үстіндегі × белгісін қолданыңыз.
Бағандар мен жолдар әртүрлі өлшемде бола ала ма?
Иә. Әрбір жолдың өз өлшем өрісі бар және сіз онда кез келген тор мәнін жаза аласыз — 1fr, 200px, auto, min-content немесе minmax(120px, 1fr). Бірдей өлшемдегі жолдар шығыс кодын қысқарту үшін repeat() функциясына біріктіріледі. Бағандар мен жолдар аралығы жеке орнатылады және олар сәйкес келгенде біртұтас gap мәніне біріктіріледі.
Жасалған кодпен не істеймін?
CSS және HTML кодтарын қатар көшіріп алыңыз. HTML сізге әр элементке бір div бар контейнерді береді, ал CSS торды анықтап, әр элементті орналастырады. Екеуін де жобаңызға қойсаңыз, мұнда салған орналасу схемасын дәл аласыз.