Что это такое
CSS Grid Lanes — это нативный способ создавать масонри-лайауты прямо в браузере. Карточки разной высоты плотно заполняют пространство без пустот, как на Pinterest, но без JavaScript и библиотек вроде Masonry.js.
До сих пор такие сетки собирали через JS, что добавляло лишние вычисления в рантайме. При изменении размера окна они часто начинали тормозить или ломаться. Grid Lanes решает эту проблему чистым CSS.
Как работает
Основная синтаксис проста:
.container {
display: grid-lanes;
grid-template-columns: 1fr 1fr 1fr;
}
Применяешь display: grid-lanes к контейнеру, задаёшь колонки или строки — и элементы автоматически распределяются по лейнам.
Два режима раскладки
Waterfall (колонки)
При определении grid-template-columns создаётся вертикальный водопад. Элементы размещаются в той лейне, которая ближе всего к верхней части. Отлично подходит для ленивой загрузки контента снизу.
Brick (строки)
При определении grid-template-rows получается горизонтальная кирпичная раскладка. Элементы расставляются по ближайшей к левому краю позиции.
Типы размеров дорожек
fr— дробные единицы, делят пространство пропорционально (1fr 2fr 1fr)- Фиксированные единицы:
px,em,rem,ch(ширина символа),lh(высота строки) %— проценты (работают, ноfrобычно удобнее)auto— размер по содержимомуmin-contentиmax-content— минимум и максимум без переносаfit-content(300px)— сжимается-растягивается до указанного лимитаminmax(200px, 1fr)— гибкий размер в диапазонеrepeat()— повтор паттерна (repeat(3, 1fr))
Автоматическое количество колонок
auto-fill — создаёт все дорожки, которые поместятся, даже пустые.
auto-fit — создаёт дорожки только под имеющиеся элементы.
Универсальный рецепт для отзывчивых сеток:
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
Аджастишь 120px под размер твоих карточек — и сетка сама меняет количество колонок при ресайзе окна.
Для очень узких экранов, чтобы одна колонка не переполнилась:
grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));
Контроль пакования
flow-tolerance управляет тем, как элементы распределяются по лейнам. Влияет на компактность раскладки — низкое значение делает её более плотной, высокое даёт лейнам больше свободы.
Примеры и браузеры
Численность демо включает фото-галереи, рецепты, газетные лайауты, мега-меню, таймлайны и доски объявлений.
Пока Grid Lanes доступен только в Safari, но скоро появится и в других браузерах. На официальном сайте есть интерактивные примеры и полный гайд — попробуй там, если браузер поддерживает.