Генератор CSS Grid

Как пользоваться

1. В блоках «Колонки» и «Строки» задайте количество (до 6 колонок и до 4 строк), затем выберите размер каждой дорожки: 1fr, 2fr, auto, 100px, 200px или minmax(100px, 1fr).
2. Настройте column-gap и row-gap — промежутки между ячейками, а также justify-items и align-items — положение содержимого внутри ячейки.
3. Кликните по пронумерованной ячейке в предпросмотре (или выберите её клавишами Tab и Enter) и растяните её на несколько колонок или строк через grid-column: span и grid-row: span.
4. Нужна адаптивная сетка — включите флажок «Адаптивная»: колонки строятся через repeat(auto-fill, minmax(…px, 1fr)) и сами подстраиваются под ширину. Скопируйте код кнопкой «Копировать».

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

grid-template-columns и grid-template-rows

Элемент с display: grid становится сеткой. grid-template-columns задаёт ширину колонок, а grid-template-rows — высоту строк; каждое значение — это отдельная «дорожка» (track), полоса между линиями сетки. Дорожки можно задавать в пикселях, процентах, через auto или единицу fr. Генератор сам сворачивает одинаковые дорожки в repeat().

.grid {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: auto 1fr;
}

Единица fr и repeat()

1fr — это одна доля свободного места в контейнере. При 1fr 2fr вторая колонка вдвое шире первой: сначала вычитаются фиксированные размеры (200px) и промежутки, а остаток делится по долям fr. Запись repeat(3, 1fr) — короткий способ получить три равные колонки. А minmax(100px, 1fr) задаёт минимальный размер: колонка не уже 100px, но растёт, если есть место.

.grid {
  grid-template-columns: repeat(3, 1fr);
}

gap, justify-items и align-items

gap (то есть row-gap и column-gap) разделяет дорожки и не создаёт отступов по краям сетки. justify-items выравнивает содержимое ячейки по горизонтали, align-items — по вертикали. Значение по умолчанию — stretch: элемент заполняет всю ячейку. Значения start, end и center сжимают элемент до размера его содержимого.

.grid {
  gap: 12px 24px; /* row-gap column-gap */
  justify-items: center;
  align-items: start;
}

Растяжение на несколько колонок и строк (span)

grid-column: span 2 говорит элементу занять две колонки, а grid-row: span 2 — две строки. Остальные элементы при автоматическом размещении сдвигаются в следующие свободные ячейки. Если из-за растянутых элементов заданных строк не хватает, браузер создаёт дополнительные «неявные» строки; их высотой управляет grid-auto-rows.

.item:nth-child(1) {
  grid-column: span 2;
  grid-row: span 2;
}

Адаптивная сетка без media queries

repeat(auto-fill, minmax(140px, 1fr)) сама выбирает число колонок по ширине контейнера: каждая колонка не уже 140px, а остаток делится между ними. Карточки переносятся на узких экранах, и @media писать не нужно. auto-fill сохраняет пустые дорожки, а auto-fit схлопывает их и растягивает имеющиеся элементы.

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

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