Создать аккаунт
Интерфейсы и CSSРаботает в браузере

CSS Grid Generator

Настройте простой grid container для layout prototype без drag-and-drop редактора и без анализа существующих stylesheet.

  • 1–12 columns
  • 1–8 rows
  • minmax columns
Онлайн-инструмент

Попробуйте инструмент

Добавьте данные, выберите нужные параметры и получите готовый результат.

Исходные данные

Результат

display: grid;
grid-template-columns: repeat(3, minmax(180px, 1fr));
grid-template-rows: repeat(2, auto);
gap: 16px;
  • Grid остаётся bounded: максимум 12 колонок и 8 рядов.

Ваши данные остаются здесь

Текст и выбранные файлы обрабатываются в текущем браузере и не отправляются на сервер для получения результата.

Проверено: 2026-07-17
01

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

  1. 1

    Укажите число колонок и рядов.

  2. 2

    Настройте gap и минимальную ширину колонки.

  3. 3

    Скопируйте container CSS declaration block.

02

Что умеет инструмент

  • repeat() + minmax() columns.
  • Bounded rows and gap values.
  • Plain CSS block for container usage.
03

Когда пригодится

  • Быстрый старт для cards grid или dashboard surface.
  • Подбор gap/minmax values перед реализацией.
  • Документация базового layout token.
04

Что происходит внутри

Columns ограничены 12, rows — 8, чтобы output оставался компактным.

Инструмент генерирует только container declarations.

05

Вопросы и ответы

Можно генерировать grid-template-areas?

Нет. Это отдельный layout-editor workflow, не часть bounded generator.

Есть responsive breakpoints?

Нет. Output намеренно одинарный и не создаёт media queries.