Softonic

Генератор CSS Grid

Шаг 1 / 3
Далее

CSS Grid это стандартный способ строить 2D-раскладки, но синтаксис контейнера легко забыть. Этот генератор пишет правила контейнера за вас: фиксированное число колонок равной ширины, отступ между треками и медиазапрос, который ниже минимальной ширины переключается на колонки auto-fit, чтобы раскладка оставалась читаемой на маленьких экранах. Результат это чистый CSS контейнера; расстановку элементов вы делаете сами в своей таблице стилей.

Как построить сетку

  1. 1

    Задайте число колонок

    От 1 до 12 треков равной ширины.

  2. 2

    Задайте минимальную ширину колонки

    Ниже этой ширины сетка переключается на auto-fit, чтобы каждая колонка сохраняла минимальный пригодный размер.

  3. 3

    Задайте отступ

    Пространство между колонками и строками.

  4. 4

    Сгенерируйте CSS

    Инструмент записывает правила контейнера и адаптивную замену.

  5. 5

    Скопируйте код

    Вставьте правила контейнера в таблицу стилей и расставляйте элементы своими правилами `grid-column` / `grid-row`.

Сгенерированный контейнер

display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;

@media (max-width: 660px) {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
  • repeat(3, minmax(0, 1fr)): три колонки, поровну делящие доступную ширину. 1fr это доля оставшегося пространства; minmax(0, 1fr) позволяет колонкам сжиматься меньше размера содержимого.
  • gap: отступ между каждым треком.
  • Медиазапрос переключается на repeat(auto-fit, minmax(220px, 1fr)), то есть на столько колонок, сколько поместится, каждая не уже 220px. Точка перелома это число колонок, умноженное на минимальную ширину (с нижней границей 120px), поэтому на маленьких экранах сетка переносится на новые строки, а не сжимается.

Единица fr

fr означает «доля оставшегося пространства»: после вычитания треков фиксированного размера оставшееся пространство делится на общее число единиц fr.

grid-template-columns: 200px 1fr 2fr;

На контейнере шириной 1000px первая колонка занимает 200px, а оставшиеся 800px делятся 1:2, то есть 267px и 533px.

auto-fill против auto-fit

  • auto-fill: создаёт пустые треки-заполнители, когда элементов недостаточно.
  • auto-fit: схлопывает пустые треки до нуля, и оставшиеся элементы растягиваются, заполняя строку.

Адаптивная замена использует auto-fit, что и нужно сеткам карточек: строка всегда выглядит заполненной.

Колонки разной ширины

Генератор создаёт равные колонки. Измените результат, чтобы смешивать размеры: grid-template-columns: 200px 1fr 2fr; даёт фиксированную боковую панель и две гибкие колонки в соотношении 1:2. Для именованных областей (grid-template-areas) или явной расстановки (grid-column: 1 / 3) добавьте эти правила вручную поверх сгенерированного контейнера.

Grid против Flexbox

  • Grid: явная 2D-раскладка с треками. Хорош, когда раскладка имеет структуру строк и колонок (каркас страницы, галерея, панель).
  • Flexbox: 1D-выравнивание вдоль одной оси. Хорош, когда элементы текут естественно (панель навигации, ряд кнопок).

Реальные раскладки обычно сочетают оба: Grid для каркаса страницы, Flexbox внутри компонентов.

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

  • Забытый min-width: 0 у дочерних элементов: элементы сетки по умолчанию используют минимальную ширину содержимого, из-за чего колонки fr не могут сжиматься уже самого длинного слова. Поставьте дочерним элементам min-width: 0, чтобы они могли сжиматься.
  • Вложенность без display: grid: дочерний элемент сетки сам не является сеткой, пока вы это не объявите.

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

Она защищает раскладку на маленьких экранах. Сгенерированный медиазапрос переключается на repeat(auto-fit, minmax(ширина, 1fr)), поэтому каждая колонка сохраняет как минимум эту ширину, а сетка добавляет строки вместо сжатия колонок.

Генератор создаёт равные колонки. Измените строку grid-template-columns в результате, чтобы смешивать размеры, например 1fr 2fr 1fr для широкой средней колонки или 200px 1fr для фиксированной боковой панели.

Обычно потому, что у элемента стоит min-width: auto по умолчанию, что равно минимальной ширине его содержимого. Поставьте элементу сетки min-width: 0, чтобы он мог сжиматься внутри своей ячейки.

Grid, когда раскладка имеет структуру строк и колонок (макет страницы, фотогалерея, панель). Flexbox, когда элементы текут вдоль одной оси (панель навигации, ряд кнопок, стопка полей формы).

Сопутствующие инструменты

Справочная таблица ASCII

Полная таблица ASCII от 0 до 127 с десятичным, шестнадцатеричным, восьмеричным и двоичным представлением, а также записью числовых ссылок HTML, включая NUL, LF и DEL.

Справочник сочетаний клавиш

Ищите документированные сочетания по умолчанию для VS Code, Chrome и Bash с GNU Readline в macOS, Windows и Linux.

Справочник символов HTML

Справочник HTML-сущностей с поиском, их именованными и числовыми кодами, а также копированием специальных символов и знаков одним кликом.

Счетчик FPS

Измерьте FPS браузера через requestAnimationFrame: сглаживание, минимальная и максимальная частота кадров, порог предупреждения и график по желанию. Работает локально, без загрузок и API.

Генератор цветовой палитры

Создавайте монохромные, аналоговые, комплементарные, триадные или тетрадные палитры из базового HEX-цвета и экспортируйте готовые CSS-переменные.

Генератор случайных букв

Генерируйте случайные буквы A-Z. Выберите количество, верхний или нижний регистр либо смешанный вариант для игр, заданий и уроков.