Генератор CSS Grid онлайн

≈ 7 мин чтения

Соберите двумерную сетку: колонки, ряды, gap и именованные области. Превью сразу показывает Holy Grail, дашборд или галерею — CSS копируется одной кнопкой.

Настройки сетки

Превью

CSS

Сетка собирается во вкладке. На сервер ничего не уходит.

Когда Grid, а не Flexbox

Grid — двумерная раскладка: вы сразу задаёте и колонки, и ряды. Им собирают каркас страницы, дашборд, галерею карточек, форму на несколько полей в ряд. Flexbox остаётся для одной оси: меню, ряд кнопок, выравнивание внутри ячейки. Часто их ставят вместе: снаружи Grid, внутри ячейки — flex.

Как пользоваться генератором

Задайте число колонок и рядов, размеры треков (1fr, 12rem, auto) и gap.
Клик по блоку в превью выбирает область: имя, линии колонок и рядов в синтаксисе start / end.
Пресеты Holy Grail, Dashboard и «Галерея» ставят готовые схемы — их можно править.
Скопируйте CSS или HTML + CSS. Всё считается в браузере.

Что такое fr

Единица fr — доля свободного места после фиксированных треков и gap. Запись 12rem 1fr 12rem оставляет боковые колонки по 12rem, середина забирает остаток. Это удобнее процентов: браузер сам вычитает промежутки.

css

.grid {
  display: grid;
  grid-template-columns: 12rem 1fr 12rem;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
  min-height: 100vh;
}

Линии, а не «номер клетки»

В CSS у сетки из трёх колонок четыре вертикальные линии: 1, 2, 3 и 4. grid-column: 2 / 4 занимает пространство между второй и четвёртой линией — то есть две средние колонки. -1 — последняя линия. Генератор пишет явные номера, так проще читать новичкам, чем сразу grid-area.

Автосетка без медиазапросов.

Для ленты карточек часто хватает repeat(auto-fit, minmax(180px, 1fr)) в поле размера колонок — поставьте одну колонку с этой строкой и несколько областей в один ряд. Треки сами переносятся, когда не хватает ширины.

Частые вопросы

Чем grid-area отличается от column/row?

grid-area — сокращение четырёх линий или имя из grid-template-areas. Для конструктора явные grid-column и grid-row прозрачнее: видно start и end.

Нужен ли subgrid?

Вложенная сетка с subgrid наследует треки родителя. Поддержка уже широкая, но для простого каркаса страницы обычного Grid достаточно. Этот генератор строит один уровень.

Код уходит на сервер?

Нет. Превью и CSS собираются во вкладке.

Инструмент работает в браузере. Рядом — песочница Flexbox и другие CSS-утилиты блога.

Инструменты

← К списку статей