Перейти к содержимому
Aback Tools Logo

Генератор CSS Grid

Создавайте раскладки CSS Grid визуально с настройками колонок, строк и отступов — мгновенно и бесплатно. Выбирайте единицы fr, px, % или auto для колонок и строк. Шесть готовых шаблонов дают мгновенные точки старта. Смотрите живой предпросмотр сетки с пронумерованными ячейками и копируйте готовый к продакшену CSS одним кликом. Полностью приватно, без регистрации.

CSS Grid Generator
Visual CSS Grid layout builder. Set columns, rows, and gap values with live preview. Choose from layout presets and copy the generated CSS with one click.

Layout Presets

Columns

3
1fr

Rows

3

Auto rows size to fit content

Gaps

12px
12px
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, auto);
gap: 12px;

Live Preview

1
2
3
4
5
6
7
8
9
3 × 3 grid9 cellsGap: 12×12px

Почему стоит использовать наш генератор CSS Grid?

  • Живой предпросмотр и мгновенный CSS: генератор обновляет живой предпросмотр и вывод CSS при каждом изменении — без кнопок. Смотрите, сколько колонок, строк и ячеек создаёт ваша сетка, и копируйте CSS-декларацию в один клик.
  • Гибкие единицы и шаблоны раскладки: выбирайте единицы fr, px, % или auto для колонок и строк. Шесть шаблонов дают мгновенные точки старта — от простых сеток из 3 колонок до сложных 12-колоночных раскладок и конфигураций с боковой панелью.
  • 100 % приватно — без загрузки файлов: вся генерация CSS Grid происходит локально в вашем браузере. Ваши дизайнерские решения никогда не покидают устройство и не отправляются на сервер — безопасно для клиентских проектов и проприетарных дизайн-систем.
  • Бесплатно и без ограничений: создавайте неограниченное количество раскладок без регистрации, подписки и лимитов использования. Генератор полностью бесплатен навсегда и без рекламы, блокирующей интерфейс.

Типичные сценарии использования генератора CSS Grid

  • Адаптивные раскладки страниц: веб-дизайнеры используют генератор для прототипирования адаптивных раскладок с гибкими структурами колонок. Единица fr создаёт текучие сетки, адаптирующиеся к любому экрану, а единицы px дают точный контроль для боковых панелей и шапок фиксированной ширины.
  • React и библиотеки компонентов: фронтенд-разработчики используют генератор для проектирования сеточных компонентов для приложений на React, Vue и Angular. Копируйте точный CSS и интегрируйте его в стили компонентов, styled-components или решения CSS-in-JS.
  • Передача дизайна в код: дизайнеры используют генератор, чтобы перевести сеточные раскладки из Figma, Sketch или Adobe XD в точный CSS для разработчиков. Визуальный предпросмотр совпадает с макетом, устраняя догадки при передаче.
  • Раскладки шаблонов писем: разработчики email-рассылок используют генератор для создания раскладок без таблиц с помощью CSS Grid (поддерживается в Apple Mail, Outlook.com и Yahoo Mail). Значения колонок и отступов дают чистые адаптивные структуры писем.
  • Изучение и эксперименты с CSS: начинающие фронтенд-разработчики используют генератор, чтобы понять, как grid-template-columns, grid-template-rows и gap работают вместе. Живой предпросмотр помогает увидеть влияние каждого параметра на итоговую сетку.
  • Сетки карточек и галерей: создатели контента используют генератор для проектирования карточных раскладок для архивов блога, галерей товаров, портфолио и виджетов панелей. Живой предпросмотр показывает точное число ячеек и выравнивание.

Что такое CSS Grid?

CSS Grid Layout (также известный как CSS Grid) — это двумерная система раскладки, позволяющая управлять колонками и строками одновременно. В отличие от Flexbox, который одномерен, Grid справляется со сложными раскладками страниц с элементами, выровненными в обоих направлениях. Ключевые свойства: grid-template-columns, grid-template-rows и gap (ранее grid-gap). Наш генератор создаёт эти свойства визуально и выдаёт готовый к продакшену CSS для любого современного браузера.

Как работает наш генератор CSS Grid

  1. Задайте колонки и строки: используйте ползунки, чтобы установить число колонок (1-12) и строк (1-12). Выберите единицу для каждого измерения — fr (доля доступного пространства), px (фиксированные пиксели), % (процент контейнера) или auto (под размер содержимого). Живой предпросмотр обновляется мгновенно.
  2. Настройте отступы и ширину/высоту: независимо задайте отступы колонок и строк ползунками (0-100px). При использовании единиц fr, px или % задайте размер дорожки. Предпросмотр показывает пронумерованные ячейки, чтобы вы видели, сколько элементов можно разместить.
  3. Скопируйте CSS: нажмите «Копировать CSS», чтобы скопировать готовую к продакшену CSS-декларацию в буфер обмена. Вывод включает display: grid, grid-template-columns, grid-template-rows и gap.

Единицы CSS Grid с пояснениями

  • fr (доля): распределяет доступное пространство пропорционально между колонками/строками. 1fr 2fr создаёт две колонки, где вторая вдвое шире первой. Единица fr — самый распространённый выбор для адаптивных сеток.
  • px (пиксели): создаёт дорожки фиксированного размера, которые не меняются при изменении размера контейнера. Используйте px для боковых панелей фиксированной ширины, сеток иконок и элементов с точными требованиями к размеру.
  • % (процент): создаёт дорожки, размер которых равен проценту ширины контейнера. Учтите, что процентные значения вычисляются из доступного пространства после вычета отступов.
  • auto: подгоняет размер дорожки под содержимое. Автоколонки расширяются до ширины самого широкого элемента, автостроки — до высоты самого высокого элемента в строке.

Поддержка браузеров и лучшие практики

CSS Grid поддерживается всеми современными браузерами (Chrome 57+, Firefox 52+, Safari 10.1+, Edge 16+) без вендорных префиксов. Для лучших результатов используйте единицу fr для адаптивных колонок и auto для строк, подстраивающихся под высоту содержимого. Сокращённое свойство gap принимает одно значение (равные отступы) или два (строка колонка) — наш генератор обрабатывает это автоматически.

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

Генератор CSS Grid — это визуальный инструмент, создающий код раскладки CSS Grid: вы задаёте число колонок, строк и значения отступов и сразу видите результат. Наш генератор поддерживает единицы fr, px, % и auto с шестью шаблонами раскладки. Вся генерация работает в вашем браузере без отправки данных на сервер.

CSS Grid двумерен и управляет колонками и строками одновременно, что делает его идеальным для раскладок страниц. Flexbox одномерен и распределяет элементы по одной оси. Используйте Grid для раскладок, а Flexbox для выравнивания компонентов.

Единица fr (доля) распределяет доступное пространство пропорционально между дорожками сетки. Например, grid-template-columns: 1fr 2fr создаёт две колонки, где вторая вдвое шире первой. Это самая распространённая единица для адаптивных сеток.

Да. Вся генерация CSS Grid происходит на 100 % на стороне клиента, в вашем браузере. Ваши дизайнерские решения никогда не отправляются на сервер, не сохраняются и не передаются.

Да. Он на 100 % бесплатный, без регистрации, премиум-функций и ограничений использования. Создавайте неограниченное количество раскладок без ограничений.

Наш генератор поддерживает четыре единицы: fr (доля доступного пространства), px (фиксированные пиксели), % (процент контейнера) и auto (под размер содержимого). Можно независимо выбирать разные единицы для колонок и строк.

Используйте единицу fr для колонок, и вы создадите адаптивные сетки, подстраивающиеся под ширину контейнера. Сетка из 3 колонок с колонками 1fr делит доступное пространство поровну при любом размере экрана.

Да. Используйте произвольные значения в Tailwind: className="grid grid-cols-[repeat(3,1fr)] gap-4". Все единицы (fr, px, %) работают с синтаксисом произвольных значений Tailwind.