Что такое 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.