Песочница CSS Grid

CSS grid превращает элемент в двумерный макет. Вы задаёте display: grid на контейнере, определяете колоночные и строчные треки через grid-template-columns и grid-template-rows, а браузер размещает каждый дочерний элемент в получившихся ячейках. Например, grid-template-columns: repeat(3, 1fr) создаёт три равных колонки, и дочерние элементы заполняют их слева направо, сверху вниз. В отличие от старых float- или flexbox-макетов, grid управляет строками и колонками одновременно, позволяя контролировать обе оси из одного свойства контейнера.

Добавьте display: grid к контейнеру, затем опишите его треки. Минимум — одна строка: display: grid; grid-template-columns: 1fr 1fr; — это даёт две равные колонки. Далее добавляйте grid-template-rows для явных строк, gap для отступов и правила для отдельных элементов, например grid-column: span 2, чтобы дочерний элемент растянулся на несколько ячеек. Сокращённое свойство grid может объединить строки, колонки и области в одном объявлении, но большинство разработчиков задают grid-template-columns, gap и выравнивание по отдельности для лучшей читаемости. Этот генератор записывает эти правила за вас.

Они определяют размер каждого колоночного и строчного трека. grid-template-columns: 200px 1fr 1fr создаёт фиксированную первую колонку шириной 200px и две гибких, делящих оставшееся пространство. grid-template-rows: auto 1fr задаёт первую строку по размеру контента и вторую, заполняющую оставшуюся высоту. Каждое значение в списке — один трек, а количество значений определяет число явных колонок или строк сетки. Этот генератор строит оба списка по мере добавления и редактирования треков, обновляя предпросмотр в реальном времени.

fr — единица «доли»: она делит оставшееся пространство, поэтому repeat(3, 1fr) создаёт три колонки равной ширины. repeat(n, значение) — сокращение, повторяющее паттерн трека n раз, так что repeat(4, 1fr) равно 1fr 1fr 1fr 1fr. minmax(min, max) задаёт трек, который никогда не сужается ниже min и не расширяется выше max; minmax(150px, 1fr) удерживает колонку минимум 150px и позволяет ей расширяться. Комбинируйте их — repeat(auto-fit, minmax(150px, 1fr)) — для сетки, которая сама добавляет и убирает колонки при изменении ширины контейнера.

Используйте repeat() с auto-fit (или auto-fill) и minmax(), чтобы сетка перестраивалась автоматически: grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)). Каждая колонка остаётся не уже 200px, а браузер вмещает столько колонок, сколько позволяет контейнер, переходя к меньшему числу на узких экранах и к большему — на широких. Переключите этот генератор в режим «Адаптивный», задайте минимальную ширину ячейки и скопируйте результат. Это самый простой способ создать плавную карточную сетку, адаптирующуюся от мобильного до десктопа без единого медиазапроса.

grid-template-areas позволяет именовать регионы и рисовать макет в виде ASCII-арта. Вы даёте каждому дочернему элементу имя через grid-area, а затем описываете сетку: grid-template-areas: 'header header' 'sidebar main' 'footer footer'. Повторение имени в нескольких ячейках объединяет их в одну область, точка (.) оставляет ячейку пустой. Это самый читаемый способ строить классические каркасы страниц — шапка, боковая панель, основной контент, подвал — потому что шаблон визуально повторяет макет. Вкладка «Области» здесь пишет шаблон и соответствующие правила grid-area для каждого именованного региона.

Для сетки 2x2 задайте две колонки и две строки: grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; и разместите четыре элемента. Для трёхколоночной сетки используйте grid-template-columns: repeat(3, 1fr) и дайте элементам заполнять строки по необходимости. В этом инструменте достаточно задать количество колонок и строк — предпросмотр обновится сразу, без ввода кода вручную. Генератор автоматически применяет сокращение repeat(), когда соседние треки одинаковы.

12-колоночная сетка — это дизайнерское соглашение, popularised Bootstrap и Foundation, делящее страницу на двенадцать равных колонок. Двенадцать выбрано потому, что оно без остатка делится на два, три, четыре и шесть. Компонент может занимать любое целое число колонок: 6 — половина, 4 — треть, 3 — четверть. В CSS grid это воссоздаётся одной строкой: grid-template-columns: repeat(12, 1fr), а дочерним элементам задаётся grid-column: span 4 для задания размера. Установите здесь 12 колонок, чтобы получить классическую сетку фреймворка в виде чистого CSS без зависимости от Bootstrap.

Grid двумерный — он управляет строками и колонками одновременно, — тогда как flexbox одномерный: элементы выстраиваются вдоль одной строки или колонки. Используйте grid, когда строите общий макет страницы или карточек с выровненными строками и колонками (дашборды, галереи, каркасы страниц). Используйте flexbox для единой полосы контента — навигационной панели, тулбара или ряда кнопок. Они хорошо работают вместе: grid для внешней структуры страницы, flexbox внутри отдельных ячеек.

Tailwind содержит утилиты для grid: добавьте grid плюс grid-cols-3 для трёх равных колонок, gap-4 для отступов и col-span-2 / row-span-2 на дочерних элементах для их растяжения. grid-cols-3 компилируется в repeat(3, minmax(0, 1fr)). Для нестандартных треков — например, адаптивного auto-fit — используйте произвольное значение: grid-cols-[repeat(auto-fit,minmax(150px,1fr))]. Переключите вывод на вкладку Tailwind, и этот генератор напишет точные классы утилит для контейнера и каждого элемента — готовые к вставке в JSX или HTML-разметку.

Используйте grid-column и grid-row на дочернем элементе. grid-column: span 2 делает элемент шириной в две колонки; grid-column: 1 / 3 размещает его от линии 1 до линии 3 (тоже две колонки). То же самое по вертикали: grid-row: span 2. В Tailwind это col-span-2 и row-span-2. В этом конструкторе можно перетащить курсор по ячейкам в предпросмотре, чтобы создать растянутый элемент, или ввести точные значения начала и охвата в панели элемента. CSS- и Tailwind-вывод обновляются по мере работы.

Свойство gap добавляет пространство между треками: gap: 16px ставит 16px между каждой строкой и колонкой. Оси можно задать раздельно: gap: 24px 16px (сначала row-gap, затем column-gap), или использовать row-gap и column-gap напрямую. Gap влияет только на пространство между ячейками — он никогда не добавляет отступы по внешнему краю сетки, что является частым источником путаницы. Используйте элементы управления row-gap и column-gap здесь — свяжите их для единого отступа или разъедините для тонкой настройки каждой оси независимо.

Полностью бесплатный, без регистрации и установки. Layoutit Grid — хорошая отправная точка, но без Tailwind-вывода и с необходимостью переходить на отдельную вкладку для копирования правил grid-area. CSS Grid Generator Сары Дразнер — минималистичный учебный инструмент без управления отдельными элементами и ссылок для шаринга. UtiloKit добавляет Tailwind CSS-вывод, именованные области шаблона, адаптивный режим auto-fit, ссылки для шаринга и интерактивный редактор элементов с растяжением перетаскиванием — всё в одном месте. Всё генерируется локально в браузере, поэтому ваши макеты никогда не загружаются на сервер.

Да. Инструмент полностью адаптивен и работает в любом современном мобильном браузере, включая Safari на iPhone и Chrome на Android. Создавайте макеты сетки на ходу, копируйте CSS- или Tailwind-вывод и вставляйте в свой проект. Поскольку всё работает на стороне клиента, загрузки нет, аккаунт не нужен и ждать не придётся. Инструмент работает даже офлайн после загрузки страницы. Редактор элементов с растяжением перетаскиванием поддерживает касания, так что сложные макеты сетки можно строить без мыши.