Генератор CSS Grid онлайн — визуальный конструктор grid-template-areas

Генератор CSS Grid

Визуальный конструктор для создания CSS Grid разметки. Настройте строки, колонки и области.

Конструктор

Строки (rows)

Колонки (columns)

Gap (px)

Высота ячейки (px)

Align-items

Justify-items

grid-template-columns

Подсказка: можно использовать repeat(), minmax(), fr и т.д.

grid-template-rows

Области (grid-template-areas)

Добавить область

Лучше латиницей: header, sidebar, content. Русские имена будут автоматически транслитерированы.

Сетка (клик/drag назначает активную область)

Совет: выберите область в “чипах”, затем кликайте по ячейкам. Можно “рисовать” протягиванием (drag). Чип . очищает ячейку.

Код

grid-template-areas (строки)

CSS

HTML (пример)

Область	Ячеек	Действия