Генератор CSS Grid

fr означает «доля доступного свободного пространства». После того как столбцы фиксированного размера (px, auto) занимают своё место, оставшаяся ширина делится на доли. grid-template-columns: 1fr 2fr 1fr создаёт три столбца, где средний получает вдвое больше места, чем каждый из боковых. Использование fr — предпочтительный способ создавать адаптивные сетки, которые подстраиваются под разную ширину экрана без media queries.

Размеры треков разделяются пробелами: grid-template-columns: 200px 1fr 1fr создаёт фиксированную боковую панель 200px и два равных адаптивных столбца. Можно смешивать единицы: 1fr auto 1fr делает средний столбец по ширине содержимого. Сокращение repeat() упрощает повторение: repeat(3, 1fr) равнозначно 1fr 1fr 1fr. Этот инструмент автоматически генерирует правильное сокращение в выводе CSS.

gap (ранее grid-gap) добавляет пространство между треками сетки, но не по внешним краям. Это почти всегда то, что нужно: равномерные отступы между ячейками без лишних полей вокруг контейнера. margin добавляет отступы вокруг отдельных элементов сетки, что приводит к несимметричным краям и увеличивает общий размер контейнера. Используйте gap для отступов между ячейками и padding на grid-контейнере для воздуха вокруг всего макета.

Задайте grid-column-start и grid-column-end для элемента. Например, grid-column: 1 / 3 заставляет элемент начинаться с линии 1 и заканчиваться на линии 3, охватывая 2 столбца. Можно также использовать ключевое слово span: grid-column: span 2. Та же логика применяется к строкам через grid-row. Выберите элемент сетки в этом инструменте и задайте значения start/end, чтобы автоматически получить нужный CSS.

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

grid-template-areas позволяет определить макет с помощью визуальной ASCII-карты. Пример: grid-template-areas: "header header" "sidebar content" "footer footer". Затем элементы назначаются областям через grid-area: header, grid-area: sidebar и т. д. Это делает сложные макеты наглядными и позволяет легко перестраивать их через media query — достаточно переопределить grid-template-areas для нужной точки останова.

Нет. Всё работает в вашем браузере. Конфигурации сетки никогда не покидают ваше устройство.