Дизайн / Макет

Генератор CSS Grid (визуальный конструктор grid-template-areas)

Задайте столбцы, строки и отступ, выделяйте ячейки, чтобы создавать именованные области — например, header, sidebar и main, — и копируйте готовый CSS с grid-template-columns, grid-template-rows и grid-template-areas.

Генератор CSS Grid (визуальный конструктор grid-template-areas): Размеры треков записываются по мере ввода, например 200px 1fr 1fr, а повторяющиеся размеры преобразуются в repeat(). Каждая область становится именем в grid-template-areas, для пустых ячеек используется точка, а для размещения элемента добавляется правило с grid-area. Согласно требованиям CSS области должны быть прямоугольными и не могут перекрываться; макет сохраняется в этом браузере. Работает на 100% локально в вашем браузере, файлы на сервер не загружаются.

Категория
Инструменты для разработчиков
Запуски
В вашем браузере
Стоимость
Бесплатно · без регистрации
Доступность
Готово к использованию
Генератор CSS GridЛокальная обработка

Полностью работает в браузере

Перетащите указатель по ячейкам, чтобы создать область. Она может занимать несколько строк и столбцов. Введите размеры дорожек, например 1fr, 200px, auto или minmax(100px, 1fr).

CSS

.grid {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
  grid-template-areas:
    "header  header  header"
    "sidebar main    main"
    "footer  footer  footer";
}

.header { grid-area: header; }

.sidebar { grid-area: sidebar; }

.main { grid-area: main; }

.footer { grid-area: footer; }

Присвойте каждому дочернему элементу класс соответствующей области. Ячейки, обозначенные точкой, остаются пустыми.

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

Каждая строка в grid-template-areas — это один ряд, а каждое слово — одна ячейка: "header header" "sidebar main" размещает заголовок на всю ширину обеих колонок. Дочерний элемент с grid-area: main заполняет каждую ячейку с именем main. Имена не обязаны совпадать с именами классов, но одинаковые имена упрощают чтение CSS.

Распространённые размеры треков

minmax(200px, 1fr) оставляет колонку шириной не менее 200 px, но позволяет ей расширяться; auto подстраивается под содержимое; repeat(auto-fill, minmax(12rem, 1fr)) создаёт столько колонок, сколько помещается, — это типичный шаблон для сеток карточек. Сделать интервалы гибкими можно с помощью генератора CSS clamp.

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

  1. Выберите количество столбцов и строк и укажите их размеры.
  2. Выделяйте ячейки, чтобы создавать области, и переименовывайте их.
  3. Скопируйте CSS и задайте каждому дочернему элементу класс его области.

Конфиденциальность и ограничения

Макет создаётся в вашем браузере.

Похожие инструменты

CSS clamp()Тень блокаФорматтер CSSФлексбоксClip-path

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

Что означает fr?

Одна доля свободного пространства: 1fr 2fr означает, что второй столбец будет вдвое шире первого после вычета фиксированных размеров и отступов.

Почему области не могут перекрываться или иметь L-образную форму?

grid-template-areas поддерживает только прямоугольные области, каждая из которых указывается один раз. Перекрывающиеся элементы возможны в CSS Grid, но для них вместо именованных областей нужно явно указывать номера линий.

Как сделать макет адаптивным?

Используйте созданный CSS для широкого макета, а для узких экранов переопределите grid-template-columns и grid-template-areas внутри медиазапроса.

Бесплатный инструмент · запусков: в вашем браузере · аккаунт не нужен