Какво е 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.