Как создать CSS Grid-разметку с колонками, строками и отступами

Укажите число или собственную схему колонок и строк, задайте отступы и сгенерируйте CSS Grid. Числовые значения колонок и строк преобразуются в записи repeat, а числовые расстояния выводятся в пикселях.

Что делает генератор CSS Grid

Генератор CSS Grid помогает быстро получить заготовку CSS для сетки, когда нужно задать число колонок, тип строк и расстояния между элементами. Он принимает настройки колонок, строк и отступов, а затем формирует результат с объявлением display: grid, шаблонами колонок и строк. Это удобно для черновой разметки карточек, панелей или других блоков, если вы хотите сначала определить структуру сетки, а затем проверить и доработать CSS вручную.

Настройки можно оставить пустыми и начать с предустановленных значений. В таком случае используются 3 колонки, строки auto, общий отступ 10, а отдельные расстояния между колонками и строками равны 0. Поля колонок и строк подходят не только для чисел: числовой ввод преобразуется в текст перед интерпретацией, поэтому целое значение вроде 3 принимается как настройка сетки.

Пошаговая настройка

1. Откройте генератор и определите структуру будущей сетки. Для равномерных колонок укажите их количество, например 3. Для строк можно указать количество, например 2, либо оставить auto, если высота строк должна задаваться содержимым. Если нужна собственная схема, введите текст CSS, например 200px 1fr для колонок или 120px auto для строк.

2. Настройте расстояния. Общий отступ задаётся числовым значением и влияет на декларацию gap. Отдельно можно указать расстояние между колонками и между строками. Вводимые числовые значения в результате получают единицу px. Если значение отдельного поля не задано, соответствующая декларация не добавляется. То же относится к общему отступу: при пустом или нулевом значении отдельная декларация общего gap не появляется.

3. Запустите генерацию результата после заполнения параметров. Для быстрого первого варианта можно использовать значения по умолчанию. Для точной заготовки задайте все нужные параметры, но не вводите число там, где вам нужна произвольная последовательность размеров: числовое значение и текстовая схема обрабатываются по-разному.

4. Просмотрите полученный CSS. Проверьте число дорожек, тип строк и единицы расстояний. Скопируйте подходящую часть в свой стиль и при необходимости измените селектор, размеры или дополнительные свойства уже в собственном проекте. Генератор формирует CSS Grid-разметку, но не заменяет проверку того, как конкретное содержимое будет выглядеть в вашей странице.

Для числового значения колонок используется запись repeat(число, 1fr). Поэтому ввод 3 превращается в шаблон с тремя долями 1fr. Для числового значения строк, отличного от auto, применяется запись repeat(число, auto). Текст вроде 1fr 1fr 1fr или 200px 1fr сохраняется как пользовательская схема, а не преобразуется в repeat.

Как читать результат и где нужны проверки

Смотрите на результат как на описание каркаса сетки. display: grid сообщает, что элемент использует CSS Grid, шаблон колонок определяет их количество и ширину, а шаблон строк задаёт число строк или их поведение. Число колонок 3 означает не три конкретных значения ширины, а повторение 1fr три раза. Аналогично, число строк 2 задаёт две строки с размером auto.

Расстояния нужно интерпретировать с учётом условий генерации. Заполненный общий отступ появляется как gap с единицей px. Заполненные отдельные поля дают column-gap или row-gap также в пикселях. Пустое или нулевое значение не создаёт соответствующую декларацию. Поэтому отсутствие строки gap, column-gap или row-gap может быть нормальным результатом настройки, а не признаком ошибки.

Пользовательский текст сохраняется как текстовая схема. Это позволяет передать варианты вроде 200px 1fr, но результат не следует воспринимать как проверку произвольного CSS-выражения. Если схема содержит неподходящий синтаксис для вашей задачи, исправьте её после генерации. Также проверьте, соответствует ли число дорожек фактическому количеству элементов: лишние элементы могут перейти на дополнительные строки по правилам CSS Grid, а их внешний вид зависит от остальных стилей страницы.

Если вы не задавали параметры, сравнивайте результат с настройками по умолчанию: три колонки, строки auto, общий отступ 10 и нулевые отдельные расстояния. Такой результат подходит как стартовая заготовка, но не описывает требования конкретного макета.

Практический пример

Для сетки карточек вы задаёте три колонки, две строки и расстояние 16 пикселей между дорожками.

В поле колонок введите 3, в поле строк 2, а в поле общего отступа 16, затем запустите генерацию.

В результате будут display: grid, шаблон колонок в форме repeat(3, 1fr), шаблон строк в форме repeat(2, auto) и общий отступ gap: 16px.

Ограничения

• Числовое преобразование применяется только к значениям, состоящим из цифр, а расстояния в результате получают px; произвольные CSS-выражения и другие единицы нужно проверить и при необходимости исправить вручную.

Частые ошибки

• Ошибка: ожидать, что любое текстовое значение будет пересчитано в число дорожек. Причина в том, что только значение, состоящее из цифр, получает синтаксис repeat; исправление: для автоматического преобразования введите число, а для собственной схемы используйте готовый текст CSS и проверьте его отдельно.

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

Как задать три колонки CSS Grid?

Введите число, например 3. Для такого значения генератор использует repeat(3, 1fr). Если нужна схема с конкретными размерами, укажите текст вроде 200px 1fr, который сохраняется как пользовательский шаблон.

Как настроить строки в CSS Grid?

Укажите число, отличное от auto, чтобы получить запись repeat(число, auto). Значение auto остаётся специальным вариантом, а другой текст сохраняется без преобразования в числовой шаблон.

Почему в результате может не быть gap или отдельного расстояния?

Только если поле содержит truthy-значение: тогда расстояние выводится с единицей px. Пустое или нулевое значение не добавляет соответствующую декларацию. Это правило действует отдельно для общего отступа, колонок и строк.