Шта је CSS Grid?
CSS Grid Layout је дводимензионални систем распоређивања уграђен у модерне прегледаче. Дефинишете контејнер решетке помоћу display: grid, затим контролишете колоне са grid-template-columns и редове са grid-template-rows. Разломљене јединице (fr) пропорционално расподељују доступни простор. Дечји елементи могу обухватати више колона или редова користећи grid-column: span N и grid-row: span N.
Како користити CSS Grid Генератор
-
Подесите број колона и редова помоћу нумеричких поља (1–12 за свако).
-
Прилагодите grid-template-columns и grid-template-rows за контролу величина (нпр. 1fr 2fr, 200px auto).
-
Подесите размак између ћелија (нпр. 10px, 1rem).
-
Кликните на било коју ћелију у прегледу да је изаберете (постаје наранџаста).
-
Подесите col-span и row-span у панелу Опсег ћелије, затим кликните Примени. Ћелије са опсегом постају зелене.
-
Кликните на картицу CSS или HTML за промену формата излаза, затим Копирај у клипборд.
-
Кликните Ресетуј све да почнете испочетка са новом решетком 3×3.