Главная›Инструменты›Генератор CSS Grid

Генератор CSS Grid

Grid раскладывает элементы сразу по двум осям, и главная его сила — единица fr, доля свободного места. Здесь колонки и строки задаются списком: можно смешивать fr, пиксели, auto и minmax, а предпросмотр показывает, как сетка себя ведёт при изменении ширины. Ячейки объединяются мышью: выделяете прямоугольник и получаете элемент на несколько колонок и строк. Отдельно собирается раскладка через именованные области — тот самый способ, при котором структура страницы читается прямо в CSS. Готовый код копируется целиком.

Предпросмотр

Кликните по двум ячейкам — элемент растянется на прямоугольник между ними. Повторный клик по объединённому снимает объединение.

Сетка

grid-template-columns

grid-template-rows

gap, px

justify-items

align-items

Именованные области

Готовый CSS

—

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

Списком через пробел: 1fr 2fr 1fr или 200px 1fr. Кнопка рядом добавляет колонку.
Кликните по первой и по последней ячейке прямоугольника — элемент растянется на них.
Переключатель собирает раскладку через grid-template-areas: структура читается прямо в коде.
Готовые правила для контейнера и для объединённых элементов.

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

Что такое единица fr

Доля свободного места, оставшегося после фиксированных колонок. Запись 1fr 2fr делит остаток в отношении один к двум. В отличие от процентов, fr считается уже после вычета gap, поэтому колонки не вылезают за контейнер — а вот три колонки по 33,3% вместе с промежутками вылезут.

Чем repeat и minmax полезны на практике

repeat повторяет описание колонки: repeat(3, 1fr) — то же, что 1fr 1fr 1fr. minmax задаёт вилку: minmax(240px, 1fr) означает не уже 240 пикселей, а дальше растягиваться. Вместе с auto-fit они дают адаптивную сетку без единого медиазапроса: repeat(auto-fit, minmax(240px, 1fr)).

В чём разница между auto-fit и auto-fill

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

Как объединить ячейки

Свойствами grid-column и grid-row с указанием линий: grid-column: 1 / 3 занимает пространство от первой линии до третьей, то есть две колонки. Есть и короткая запись через span: grid-column: span 2. Линии нумеруются с единицы, и их всегда на одну больше, чем колонок.

Когда нужны именованные области

Когда структура важнее координат. Запись grid-template-areas рисует раскладку прямо в CSS: строка «header header» и ниже «sidebar main» читается без чертежа. Перестроить макет под мобильный тогда можно одной заменой этих строк в медиазапросе, не трогая сами элементы.

Grid или flexbox

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

Данные куда-то отправляются

Нет, всё собирается в браузере.

Ещё инструменты для SEO и маркетинга

Кластеризатор запросов, генераторы sitemap и robots.txt, минус-слова, разметка Schema.org и калькуляторы — в разделе инструментов.

Все инструменты Семантическое ядро