Генератор CSS Grid — визуальный конструктор сеток
Колонки 3
Ряды 2
column-gap 12px
row-gap 12px
justify-items
align-items
Нажмите на ячейку, чтобы настроить её
display: grid;
Визуальный конструктор CSS Grid. Задайте число колонок и рядов, размер каждой дорожки в fr, px, % или auto, отрегулируйте отступы между колонками и рядами, а затем нажмите на любую ячейку, чтобы растянуть её на несколько колонок или рядов. Превью обновляется сразу, а готовый код grid-template можно скопировать в свой файл стилей.
Как это работает
- 1 Задайте дорожки Выберите количество колонок и рядов, затем задайте размер каждой дорожки отдельно. Единица fr делит свободное место на доли, px задаёт фиксированный размер, % — долю контейнера, а auto отдаёт размер содержимому.
- 2 Настройте отступы и выравнивание Ползунками column-gap и row-gap разведите дорожки, а justify-items и align-items определяют, как элемент располагается внутри своей ячейки.
- 3 Разместите элементы и скопируйте код Нажмите на ячейку в превью, чтобы выбрать её, и задайте начальную линию или растягивание на несколько колонок или рядов. Готовый CSS копируется кнопкой в блоке ниже.
Ваши данные защищены
Всё обрабатывается прямо в вашем браузере. Никакие файлы или текст не отправляются на наши серверы. Отключите интернет — инструмент продолжит работать.
Часто задаваемые вопросы
- Что на самом деле означает единица fr?
- fr — это доля свободного места в контейнере после того, как вычтены фиксированные дорожки и все отступы. Три колонки по 1fr делят остаток на три равные части, а дорожка 2fr рядом с двумя по 1fr забирает половину. В отличие от процентов, fr автоматически учитывает gap: поэтому repeat(3, 1fr) с отступом работает, а три колонки по 33.33% вылезают за край.
- Когда брать Grid, а когда flexbox?
- Grid двумерный: он управляет рядами и колонками одновременно, поэтому подходит для каркаса страницы, дашбордов и галерей, где всё должно выравниваться в обоих направлениях. Flexbox одномерный и лучше работает там, где содержимое само определяет размеры вдоль одной линии — меню, ряд кнопок. На практике на реальных страницах используют оба: grid для каркаса, flexbox внутри компонентов.
- Как растянуть элемент на две колонки?
- Нажмите на нужную ячейку в превью и поставьте растягивание по колонкам равным 2. В коде появится grid-column: span 2 — элемент займёт две дорожки от того места, куда его поставит автоматическое размещение. Если дополнительно задать начальную линию, получится grid-column: 2 / span 2 с привязкой к конкретной колонке.
- Чем justify-items отличается от align-items в Grid?
- justify-items располагает каждый элемент по горизонтали внутри его ячейки, align-items — по вертикали. По умолчанию оба равны stretch, поэтому элементы заполняют ячейку целиком: именно из-за этого фон, заданный элементу сетки, обычно закрашивает всю ячейку. Значения start, center и end сжимают элемент до размера содержимого в соответствующем направлении.
- Почему в коде появляется repeat()?
- Когда все дорожки в списке одинаковые, repeat(n, размер) говорит то же самое короче и такой код проще менять. Инструмент сворачивает одинаковые дорожки автоматически, а как только одна из них получает другой размер, выводится полный явный список.
- Данные уходят на сервер?
- Нет. Раскладка собирается и CSS генерируется скриптом в вашей вкладке. Ничего не загружается, не сохраняется и не логируется, а при закрытии вкладки всё исчезает.