Интерактивное руководство

CSS Grid для точных компоновок

Настраивайте колонки, строки, интервалы и выравнивание на живом примере, затем используйте готовый CSS в собственных интерфейсах.

Открыть конструктор Перейти к свойствам

grid-layout.css

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

Живая настройка

Соберите сетку под свою задачу

Изменения применяются сразу, а итоговый CSS обновляется автоматически.

Параметры сетки

Колонки 3

Высота строки 110px

gap 16px

justify-items

align-items

justify-content

grid-auto-flow

Количество элементов 7

Расширенный элемент

Готовый CSS

Основные возможности

Что позволяет CSS Grid

Grid управляет компоновкой одновременно по горизонтали и вертикали.

Колонки и строки

Задавайте точное количество и размеры направляющих сетки.

grid-template-columns · grid-template-rows

Гибкие единицы

Распределяйте свободное пространство через fr, minmax и repeat.

1fr · minmax() · repeat()

Области сетки

Создавайте читаемые шаблоны интерфейса с именованными зонами.

grid-template-areas

Размещение элементов

Растягивайте блоки на несколько колонок или строк.

grid-column · grid-row

Автоматическая сетка

Управляйте созданием новых строк и колонок для неизвестного количества элементов.

grid-auto-flow · grid-auto-rows

Выравнивание

Настраивайте положение всей сетки и отдельных элементов по двум осям.

place-items · place-content · place-self

Справочник

Базовые конструкции Grid

Эти варианты закрывают большинство задач: карточные сетки, страницы, галереи и сложные адаптивные компоновки.

Основные шаблоны

Включить Grid display: grid;

Три равные колонки grid-template-columns: repeat(3, 1fr);

Адаптивные карточки grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

Промежутки gap: 24px;

Растянуть на две колонки grid-column: span 2;

Центрирование содержимого place-items: center;

Минимальная высота строк grid-auto-rows: minmax(120px, auto);

Практические советы

Как строить стабильные сетки

Используйте minmax

Сочетание repeat(auto-fit, minmax(...)) удобно для адаптивных карточек без лишних медиазапросов.

Не перегружайте areas

Именованные области удобны для крупных блоков, но могут усложнять поддержку очень динамичных сеток.

Разделяйте структуру и контент

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

Проверяйте переполнение

Длинные слова и фиксированные размеры могут ломать сетку, поэтому используйте min-width: 0 и гибкие значения.