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

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

Выберите способ построения: свойства CSS или именованные области. У каждого режима свой макет; переключение вкладок сохраняет введённые настройки до перезагрузки страницы.

Для вашего удобства рекомендую использовать полноэкранный режим.

Сохранение макета и отмена действий
  • Отмена и повтор. Кнопки «Отменить» и «Повторить» возвращают предыдущие настройки. История хранит до 100 изменений отдельно для каждого режима до перезагрузки страницы.
  • Клавиатура. Вне полей ввода работают Ctrl/⌘ + Zдля отмены и Ctrl/⌘ + Shift + Z для повтора. В полях — обычная отмена ввода.
  • Ссылка на макет. Кнопка «Поделиться» сохраняет текущий макет выбранного режимав адресе: настройки контейнера, элементы и их стили. Настройки попадут в историю браузера и сообщения, где вы поделитесь ссылкой. При открытии ссылки восстанавливаются принятые настройки, без истории изменений и незавершённого ввода.
  • Скачивание. Кнопка «Скачать HTML» сохраняет страницу с макетом. Используйте её и для больших макетов, если длина ссылки превышает ограничение.

Свойства Grid

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

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

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

Контейнер .container

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

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

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

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

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

Выравнивание элементов внутри ячеек по горизонтали. Справочник: 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>

Именованные области

Нарисуйте макет из прямоугольных областей: шапки, боковой колонки, содержимого и подвала. Каждая область получает имя и свой элемент с grid-area.

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

Выделите ячейки мышью, двумя нажатиями на начало и конец или сочетанием Shift со стрелками. Введите имя латиницей и нажмите «Назначить область». Каждая область должна быть цельным прямоугольником: при ошибке предыдущий макет сохраняется.

При уменьшении сетки крайние строки и колонки удаляются. CSS и HTML можно скопировать отдельно, а кнопка «Скачать HTML» сохраняет полную страницу с оформлением. Порядок элементов в HTML соответствует первому появлению областей в сетке; проверьте, что он подходит смыслу содержимого.

Настройте размер каждой колонки и строки отдельно: например, 240px для боковой колонки и 1fr для содержимого. При добавлении строк и колонок прежние размеры сохраняются, новые получают исходные значения. Некорректный ввод отмечается ошибкой; превью и экспорт используют последний принятый размер.

Выберите область в списке «Область целиком» или нажмите на неё в превью. Кнопка «Переименовать» меняет все её ячейки, CSS и HTML; «Удалить область» освобождает её ячейки. Нельзя переименовать область в уже занятое имя.

Начать с макета:
Размер сетки
Размеры колонок и строк

Каждое поле задаёт один размер: например, 240px, 1fr, autoили minmax(0, 1fr). Результат виден в превью ниже; ячейки редактора остаются одинаковыми для удобства выделения.

Колонки

grid-template-columns

Строки

grid-template-rows
Как выделять и назначать области

Выделите прямоугольник перетягиванием мыши или двумя нажатиями: начало и конец. С клавиатуры используйте стрелки, Shift + стрелки для расширения выделения. Затем задайте имя области.

Шаблон задаётся через grid-template-areas , привязка элемента к области — через grid-area .

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

Одной области соответствует один элемент с классом .area-имя. Повторное имя объединяет ячейки, если они образуют прямоугольник. Точка обозначает пустую ячейку.

Управление областью

Предпросмотр областей

Нажмите на область в превью или выберите её в списке, чтобы выделить целиком, переименовать или удалить. Если заданные размеры шире окна, прокрутите превью.

CSS
.container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(80px, auto));
  gap: 12px;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}

.area-header { grid-area: header; }
.area-sidebar { grid-area: sidebar; }
.area-main { grid-area: main; }
.area-footer { grid-area: footer; }
HTML
<div class="container">
  <div class="area-header">header</div>
  <div class="area-sidebar">sidebar</div>
  <div class="area-main">main</div>
  <div class="area-footer">footer</div>
</div>

Свойства в справочнике