Генератор Grid верстки

Интерактивный конструктор для макетов на основе двумерной сетки (CSS Grid Layout). Задавайте колонки и строки, растягивайте элементы на несколько ячеек, смотрите результат сразу и копируйте готовый CSS и HTML в свой проект.

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

  • Выберите готовый макет: колонки, адаптивную галерею, макет страницы или мозаику.
  • Свойства в блоке «Контейнер» применяются к .container. Чтобы настроить элементы, выберите один из них или пункт «все элементы (.item)» в списке «Настраиваем».
  • Нажмите на элемент в превью или выберите его в списке «Настраиваем», чтобы задать ему позицию в сетке, например grid-column: span 2. Такой элемент получит класс .item-N и отметку пунктиром.
  • Меняйте ширину превью ползунком «Ширина превью», чтобы проверить адаптивные колонки с auto-fill.
  • В текстовые поля можно вводить любые значения, которые поддерживает браузер: fr, minmax(), repeat() и другие.

Описание каждого свойства сетки, включая grid-template-areas и сокращённое grid, смотрите в справочнике CSS.

Конструктор Grid

Начать с макета:

Цвета и отступы элементов превью — только оформление, в код они не входят.

Контейнер .container

Размеры колонок через пробел. Используйте fr, minmax(), repeat() и auto-fill. Справочник: grid-template-columns

Размеры явных строк. Строки сверх списка получают размер из grid-auto-rows. Справочник: grid-template-rows

Размер строк, которые сетка создаёт автоматически. Справочник: grid-auto-rows

Как размещаются элементы без явной позиции. dense заполняет пропуски. Справочник: grid-auto-flow

Расстояние между строками и колонками. Можно указать два значения: по вертикали и по горизонтали.

Выравнивание элементов внутри ячеек по горизонтали. Справочник: justify-items

Выравнивание элементов внутри ячеек по вертикали. Справочник: align-items

Положение всей сетки по горизонтали, когда колонки уже контейнера. Справочник: justify-content

Положение всей сетки по вертикали, когда строки ниже контейнера. Справочник: align-content

Минимальная высота контейнера. Без свободного места выравнивание по поперечной оси незаметно. Справочник: min-height

Элементы

Выберите элемент в превью или в списке «Настраиваем», чтобы изменить его свойства. Общие настройки всех элементов — пункт «все элементы (.item)».

CSS
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
HTML
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>