CSS Grid Генератор
Дефинишите колоне и редове, превуците преко ћелија да бисте поставили ставке и копирајте готов CSS и пратећи HTML код једним кликом.
Ваша мрежа се креира директно у вашем прегледачу. Ништа што овде подесите не шаље се на BroBroGo.
Честа питања
Како да поставим ставке на мрежу (grid)?
Кликните и превуците преко ћелија да бисте означили правоугаоник — када пустите, то постаје позиционирани елемент који се протеже кроз те колоне и редове. Свака ставка коју нацртате добија своја grid-column и grid-row правила у CSS-у и одговарајући div у HTML-у. Ставке се могу преклапати, при чему она нацртана касније долази на врх; користите ознаку × на ставци да бисте је уклонили.
Могу ли колоне и редови бити различитих величина?
Да. Сваки ред и колона имају своје поље за величину, где можете уписати било коју исправну вредност — 1fr, 200px, auto, min-content или minmax(120px, 1fr). Редови или колоне који деле исту величину биће груписани помоћу repeat() функције како би код остао кратак. Размаци између колона и редова се подешавају засебно, а спајају се у јединствено својство gap када су им вредности идентичне.
Шта да радим са генерисаним кодом?
Копирајте и CSS и HTML код. HTML вам даје контејнер са по једним div-ом за сваку ставку, док CSS дефинише мрежу и позиционира сваки елемент. Налепите оба у свој пројекат и добићете идентичан распоред који сте овде нацртали.