Генератор CSS grid: столбцы, строки и именованные области

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

Введите Столбцы (размеры дорожек) и Строки (размеры дорожек). Для двух столбцов значение 200px 1fr даёт фиксированную боковую панель и гибкую основную часть.
Задайте Промежуток между столбцами (px) и Промежуток между строками (px) и дайте контейнеру Имя класса.
Введите имя в поле Имя области для закраски, оставьте режим Закрашивать и щёлкните ячейки, которые относятся к этой области. Выберите Стирать, чтобы очистить ячейки.
Скопируйте блок CSS или проверьте Предпросмотр, прежде чем вставлять правила в таблицу стилей.

Размеры дорожек и repeat()

Каждая дорожка — это размер в сетке: длина в px или процент, гибкий размер в fr, который делит оставшееся место пропорционально своему числу, auto, min-content или max-content. Запись minmax(минимум, максимум) задаёт дорожке диапазон. Спецификация CSS Grid Layout (на английском) описывает, как вычисляется каждый размер.

repeat(3, 1fr) записывает ту же дорожку три раза. repeat(auto-fill, minmax(200px, 1fr)) создаёт столько дорожек, сколько помещается в ширину блока. Поскольку это число зависит от блока, каждая дорожка в повторе auto-fill или auto-fit должна иметь фиксированный размер, и инструмент не может нарисовать поверх неё именованные области.

grid-template-columns: 200px 1fr;  grid-template-rows: auto 1fr auto;  gap: промежуток-строк промежуток-столбцов;

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

Свойство grid-template-areas принимает одну строку для каждой строки сетки. Имена в строке — это ячейки этой строки, а точка обозначает ячейку, которая не входит ни в одну область. Каждое имя должно занимать один прямоугольник, потому что браузер не может разместить имя в виде буквы L или в двух отдельных блоках.

Имена размещает на сетке контейнер, а каждый потомок занимает своё место с помощью grid-area. Инструмент пишет одно правило для каждого имени, поэтому элемент с этим классом заполняет свои ячейки.

Используйте одну строку имён для каждой строки дорожек, с одинаковым числом имён в каждой строке.
Выбирайте имена, которые описывают часть страницы, например header, sidebar или main, потому что правила записываются с этими именами как классами.

Пример: страница с шапкой, боковой панелью, содержимым и подвалом

Макет по умолчанию имеет два столбца, 200px и гибкий 1fr, и три строки: auto для шапки, 1fr для середины и auto для подвала. Промежуток равен 16 px в обоих направлениях. Шапка занимает оба столбца, боковая панель и основное содержимое делят среднюю строку, а подвал занимает оба столбца внизу.

CSS начинается с .layout { display: grid; grid-template-columns: 200px 1fr; grid-template-rows: auto 1fr auto; gap: 16px; }, затем идёт grid-template-areas с тремя строками: "header header", "sidebar main" и "footer footer". У каждого имени есть своё правило с grid-area, поэтому элемент header заполняет первую строку.

Частые вопросы

В чём разница между fr и auto?

Дорожка fr делит место, оставшееся после фиксированных дорожек, пропорционально своему числу, поэтому 1fr 2fr даёт второй дорожке вдвое большую ширину первой. Дорожка auto имеет ту ширину, которую требует её содержимое, и затем делит свободное место.

Почему нельзя рисовать области поверх дорожек auto-fill?

auto-fill и auto-fit определяют число дорожек по ширине блока, поэтому число ячеек во время редактирования неизвестно. Именованным областям нужно фиксированное число, поэтому инструмент просит убрать auto-fill или auto-fit, когда области закрашиваются.

Почему каждая область получает своё правило?

grid-template-areas размещает имена на сетке, но каждый элемент всё равно должен сказать, какую ячейку занимает, и это делает grid-area. Инструмент пишет одно правило для каждого имени, используя класс с тем же именем.

Что будет с ячейками, которые я не закрасил?

Ячейка вне областей записывается в grid-template-areas точкой. Именованные области ничего в неё не помещают, поэтому она остаётся пустой, если вы не разместите там элемент другим способом.

Какие браузеры поддерживают CSS grid?

CSS grid поддерживается всеми современными крупными браузерами. Если ваши посетители пользуются старыми версиями, проверьте макет в них, прежде чем полагаться на именованные области.

Отправляется ли мой макет куда-либо?

Нет. Сетка, предпросмотр и CSS создаются в вашем браузере. Ничего не сохраняется и не отправляется на наш сервер, поэтому скопируйте CSS до того, как уйдёте со страницы.

Источники

Цифры и текст в последний раз проверены вторник, 10 ноября 2026 г..