01
Выбрать модель
Grid подходит для строк, столбцов и именованных областей; Flexbox — для элементов в одном направлении. Значения обоих режимов сохраняются.
- В начальном примере Grid четыре прямоугольные области.
Инструменты CSS-разметки
генератор CSS-макета— Сначала проверьте вид, затем код
Переключайте Grid и Flexbox, сопоставляя поле макета, предпросмотр и полученный код.
генератор CSS-макета
Выберите первую ячейку, затем противоположный угол.
.layout {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto auto;
gap: 16px;
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; }
@media (max-width: 640px) {
.layout {
grid-template-columns: 1fr;
grid-template-rows: none;
grid-template-areas: "header" "sidebar" "main" "footer";
}
}Настройки остаются в этой вкладке браузера; ничего не загружается и не сохраняется.
Код и просмотр актуальны.
Заголовок страницы, боковая панель и основной блок образуют сетку, в которой легко ошибиться при ручной записи grid-template-areas. Генератор CSS-макета сначала показывает именованные области на экране.
Для меню или ряда карточек лучше подходит Flexbox. Этот генератор CSS-макета хранит настройки обоих режимов отдельно, поэтому к сетке можно вернуться без повторного ввода.
Зачем нужен генератор CSS-макета
Области на экране и экспортируемые правила берутся из одной модели.
Grid и Flexbox в одном рабочем поле
Генератор CSS Grid строит двумерные области, а генератор Flexbox распределяет элементы вдоль оси. При переключении настройки размеров, промежутков и выравнивания сохраняются.
Мобильный вид обеспечен настоящим CSS
Адаптивная сетка включает правило @media для ширины до 640px. Узкий предпросмотр отображает тот же HTML/CSS, который можно скопировать, а не уменьшенную картинку.
Как сверить вид и экспорт
02
Настроить размеры и области
Размеры треков можно указать в fr, px, auto или minmax(). Выберите имя области и два противоположных угла прямоугольника.
- После отключения автоматики код обновляется через Ctrl/Cmd+Enter.
03
Проверить узкий экран
Переключите просмотр на 390px и проверьте порядок областей. После изменения параметров старый код нельзя копировать или скачивать.
- Медиа-запрос добавляется только при выборе мобильного стека.
От сетки к согласованной разметке
Именованные области Grid
Визуальный редактор grid-template-areas выдаёт карту и соответствующие правила grid-area для дочерних элементов HTML.
Параметры контейнера Flexbox
Направление, перенос, выравнивание по двум осям, число элементов и промежуток меняют настоящий браузерный предпросмотр.
Адаптивные HTML и CSS
Один шаблон создаёт правило для 640px и подходящую разметку; код можно скопировать или скачать отдельным файлом.
Границы областей и кода
- Область должна быть прямоугольной
- Разделённое, перекрытое или Г-образное имя делает grid-template-areas недействительным. Поле отклоняет такое действие и блокирует экспорт устаревшего результата.
- Размеры треков проверяются
- Допустимы, например, 1fr, 200px, auto и minmax(120px, 1fr). Неподдерживаемый текст не попадёт в таблицу стилей.
- Один мобильный порог
- При ширине до 640px области складываются в столбец. Кнопки планшета и компьютера меняют только ширину просмотра; Tailwind, SCSS и React не создаются.
- HTML остаётся каркасом
- Вывод содержит области Grid или пронумерованные элементы Flex. Существующую страницу или её содержимое инструмент не импортирует.
Вопросы про генератор CSS-макета
Когда лучше использовать Grid, а когда Flexbox?
Grid задаёт двумерную структуру строк и столбцов, а Flexbox распределяет элементы вдоль одной оси. Генератор CSS-макета позволяет сравнить оба варианта.
Как сделать адаптивную сетку CSS?
Выберите мобильный стек и посмотрите вариант 390px. Экспортируемый @media перестраивает области при ширине до 640px; для реального содержимого порог можно изменить вручную.
Что означают fr и px в колонках сетки?
fr делит свободное место между треками, px задаёт фиксированный размер, а auto зависит от содержимого. Значения проверяются до экспорта.
Как задать области grid-template-areas?
Повторите имя в соседних ячейках одного прямоугольника и назначьте дочернему элементу соответствующий grid-area. Карта и правило создаются вместе.
Какой CSS создаёт генератор сетки?
Генератор создаёт правило контейнера, размещение именованных областей, пример HTML и при необходимости мобильный медиа-запрос. Он не разбирает существующий сайт.
Не хватает примера макета?
Откройте генератор CSS-макета
Возьмите готовый пример, проверьте отображение в браузере и перенесите согласованные HTML и CSS в проект.