Генератор CSS Grid

Задайте столбцы, строки и отступы — выберите fr, px или auto для каждого трека или введите явный список, например «1fr 2fr 1fr». Нумерованный предпросмотр обновляется в реальном времени, затем скопируйте готовый CSS. Всё работает в вашем браузере.

Предпросмотр
Столбцы3
Строки3
Зазор между столбцами12px
Зазор между строками12px
Единица столбцов по умолчанию
Единица строк по умолчанию
Сгенерированный CSS

Всё работает в вашем браузере. Ничего не загружается.

Как это работает

STEP 1

Задайте столбцы и строки

Перетаскивайте ползунки, чтобы задать количество столбцов, строк и величину отступов. Предпросмотр заполняется пронумерованными ячейками по мере изменений.

STEP 2

Выберите размер треков

Выберите fr, px или auto для одинаковых треков или включите явные списки треков и введите, например, «1fr 2fr 1fr» для полного контроля.

STEP 3

Скопируйте CSS

Скопируйте готовое правило — display, grid-template-columns / rows и gap — одним кликом и вставьте его в свою таблицу стилей.