Генератор CSS Grid

Q: Как растянуть элемент на всю ширину?

Задайте grid-column как `1 / -1`; -1 обозначает последнюю линию сетки.

Стройте CSS Grid визуально: grid-template-columns/rows, именованные области с проверкой, отступы, выравнивание и размещение элементов. Чистый CSS.

Пресеты

Контейнер

grid-template-columns

grid-template-rows

grid-template-areas

Одна строка текста на строку сетки, имена через пробел, точка (.) — пустая ячейка. Каждое имя должно образовывать прямоугольник.

column-gappx

row-gappx

justify-items

align-items

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

Элемент 1

Выберите элемент здесь или нажмите на него в предпросмотре.

grid-column

grid-row

grid-area

Примеры: 1 / 3, span 2, 2 / -1. Имя области имеет приоритет над размещением по линиям.

Предпросмотр

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

CSS-код

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

Что такое Генератор CSS Grid?

Конструктор макетов CSS Grid: введите любой шаблон треков (например, repeat(auto-fill, minmax(120px, 1fr))), нарисуйте именованные области, задайте отступы и выравнивание и разместите отдельные элементы по номерам линий, диапазонам или именам областей. Живой предпросмотр использует сгенерированный CSS.

Как пользоваться Генератор CSS Grid

Начните с пресета (3 колонки, адаптивные карточки, Holy grail, боковая панель, Bento) или введите grid-template-columns и grid-template-rows.
При необходимости напишите grid-template-areas: одна строка на ряд, имена через пробел, точка для пустой ячейки.
Задайте row-gap, column-gap, justify-items, align-items и количество элементов.
Выберите элемент и задайте grid-column, grid-row (например, 1 / 3, span 2) или выберите grid-area.
Скопируйте CSS-код.

Пример

Ввод

grid-template-columns 200px 1fr, row-gap 8px, column-gap 16px; item 2: grid-column 1 / 3, grid-row span 2

Вывод

.container {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 8px 16px;
}

.item-2 {
  grid-column: 1 / 3;
  grid-row: span 2;
}

Отступы по строкам и столбцам различаются, поэтому gap записан двумя значениями.

Когда использовать Генератор CSS Grid

Grid подходит для двумерных макетов: каркасов страниц, дашбордов, галерей и сеток карточек. Для одной строки или столбца элементов, размер которых определяется содержимым, часто проще flexbox (см. генератор CSS Flexbox).

Как работает Генератор CSS Grid

Шаблоны и значения размещения проверяются встроенным в браузер CSS.supports(), поэтому принимается всё, что допустимо в CSS, а некорректные значения помечаются. Текст областей проверяется: в каждой строке должно быть одинаковое число ячеек, а каждое имя должно образовывать один прямоугольник. В результате выводятся display: grid, шаблоны, grid-template-areas с одной строкой в кавычках на ряд, gap (одно значение, если отступы по строкам и столбцам равны, иначе row column) и выравнивание, только если оно не stretch. Правила grid-area или grid-column/grid-row у элементов появляются только при заданных значениях.

Распространенные Случаи Использования

Каркасы страниц с шапкой, боковой панелью, основной частью и подвалом
Адаптивные галереи карточек на auto-fill и minmax()
Дашборды в стиле bento с плитками разного размера
Журнальные макеты с именованными областями
Макеты форм со столбцами подписей и полей

Часто Задаваемые Вопросы

Почему инструмент пишет, что моя область не прямоугольная?

В grid-template-areas каждое имя должно занимать прямоугольный блок ячеек. Г-образные формы или имена, разбитые на отдельные места, недопустимы в CSS, и всё свойство было бы проигнорировано.

Чем auto-fill отличается от auto-fit?

Оба создают столько столбцов, сколько помещается. auto-fill сохраняет пустые треки, а auto-fit схлопывает их, и существующие элементы растягиваются на всю строку.