CSS Grid Lanes - Мозаичная верстка

[kirilljsx]

Настало будущее «каменной кладки» (masonry) на вебе!

После работы, проделанной компании Mozilla, многолетних усилий команды WebKit от Apple и многочисленных дискуссий в рабочей группе CSS со всеми браузерами, теперь стало ясно, как это работает.

Компании представили - CSS Grid Lanes.

.container {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

Кстати попробовать можно уже сегодня в Safari Technology Preview 234.

Как работают Grid Lanes

HTML разметка это просто контейнер с набором картинок:

<main class="container">
  <img src="photo-1.jpg">
  <img src="photo-2.jpg">
  <img src="photo-3.jpg">
  …
</main>

Сначала задаем display: grid-lanes на main, чтобы превратить его в Grid‑контейнер, готовый к такому типу раскладки. Затем используем grid-template-columns, чтобы создать «полосы» (lanes) с полной мощью CSS Grid.
​
В примере используется repeat(auto-fill, minmax(250px, 1fr)), чтобы создавать гибкие колонки минимум 250 px шириной; браузер сам решает, сколько колонок поместится по ширине.

.container {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

gap: 16px задаёт по 16 px между полосами и элементами. Всего тремя строками CSS, без единого media‑ или container‑запроса, получается адаптивный layout под любые размеры экрана.
​
Представьте это как шоссе с машинами в плотной пробке: каждый следующий элемент «перестраивается в полосу», которая продвигает его как можно дальше вперёд (ближе к верху окна).

Как и в библиотеке Masonry, браузер кладёт очередной элемент в ту колонку, где он оказывается максимально близко к верху контейнера. Это позволяет пользователям переходить по табу по видимым элементам слева направо/сверху вниз, а не сначала по всей первой колонке ниже фолда. Также можно бесконечно подгружать контент при скролле без JS‑логики раскладки.
​

Сила Grid

Grid Lanes используют синтаксис grid-template-*, поэтому легко создавать вариации дизайна.
​
Например, можно сделать чередующиеся узкие и широкие колонки, где первая и последняя всегда узкие, даже когда количество колонок меняется:

grid-template-columns:
  repeat(auto-fill,
    minmax(8rem, 1fr) minmax(16rem, 2fr)
  )
  minmax(8rem, 1fr);

Это открывает целый мир возможностей с использованием grid-template-*.

Элементы, растягивающиеся на несколько полос

Поскольку используется полноценный Grid, элементы могут занимать несколько полос (span).

main {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(20ch, 1fr));
  gap: 2lh;
}

article {
  grid-column: span 1;
}

@media (1250px < width) {
  article:nth-child(1) {
    grid-column: span 4;
  }
  article:nth-child(2),
  article:nth-child(3),
  article:nth-child(4),
  article:nth-child(5),
  article:nth-child(6),
  article:nth-child(7),
  article:nth-child(8) {
    grid-column: span 2;
  }
}

Сначала всем тизерам статей задают span 1, затем первой - span 4, а 2–8 - span 2, что дает динамичную графическую композицию, отличающуюся от типичных симметричных сеток.
​

Явное размещение элементов

Grid Lanes также позволяют явно размещать элементы. В примере заголовок сайта всегда попадает в последнюю колонку, независимо от их количества.

main {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(24ch, 1fr));
}

header {
  grid-column: -3 / -1;
}

Изменение направления

Полосы могут идти в любом направлении. Примеры выше создают «водопад» (waterfall) - контент стекает вниз колонками. Grid Lanes также позволяют получить «кирпичную» (brick) раскладку по строкам.

Браузер автоматически делает waterfall‑layout, если вы определяете колонки через grid-template-columns:

.container {
  display: grid-lanes;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

Чтобы получить brick‑layout, вместо этого задайте строки через grid-template-rows:

.container {
  display: grid-lanes;
  grid-template-rows: 1fr 1fr 1fr;
}

Это работает благодаря новому значению по умолчанию для grid-auto-flow - normal, которое само определяет, строится ли layout по колонкам или по строкам.

Рабочая группа CSS все еще обсуждает, какое свойство явно управляет направлением потока и какой у него будет синтаксис: дорабатывается либо grid-auto-flow, либо новое свойство вроде grid-lanes-direction.

Поскольку normal станет начальным значением в любом случае, можно уже учить Grid Lanes: если задать только grid-template-rows или grid-template-columns, все «просто работает». Если не работает - проверьте grid-auto-flow и при необходимости сбросьте через unset.

Чувствительность размещения (tolerance)

Для Grid Lanes введено новое понятие «tolerance». Оно позволяет управлять тем, насколько строго алгоритм относится к микроскопическим отличиям в высоте элементов при выборе места.
​
Если элемент чуть-чуть ниже другого, при нулевой толерантности он может попасть в «выгодную» колонку, что меняет порядок визуальных групп и может создать неожиданную таб-навигацию.
​
Поэтому значение по умолчанию для item-tolerance - 1em, то есть различия по высоте меньше 1em считаются «ничем» и не влияют на выбор полосы.

Если нужно меньше перетасовок, можно повысить item-tolerance; тогда элементы будут раскладываться почти слева направо, меняя полосу только при большой разнице в высоте (например, из‑за «лимузина» рисунок ниже).

Важно учитывать пользователей, которые переходят по табу или работают со screen reader: слишком большая или слишком маленькая толерантность может приводить к неудобным скачкам фокуса. Подбирайте значение под реальные размеры контента.

Свойство сейчас называется item-tolerance в спецификации и Safari Technology Preview 234, но имя ещё могут изменить (например, на flow-tolerance или pack-tolerance). Стоит следить за обновлениями перед использованием в проде.

Что же дальше

Grid Lanes уже доступны в Safari Technology Preview 234; все демо на webkit.org/demos/grid3 обновлены под новый синтаксис, и это не только картинки.

Например, «мега‑меню» в футере с кучей ссылок разных высот становится легко раскладывать:

.container {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(max-content, 24ch));
  column-gap: 4lh;
}

Осталось немного финальных решений в рабочей группе CSS, но в целом фича в описанном виде уже готова к использованию, и базовый синтаксис можно запоминать.
​
Разработчики призывают делать свои демки, делиться багами и идеями, и отмечают, что команда работает над этим с середины 2022 года, реализуя поддержку в WebKit и прописывая стандарт.

Официальную новость можно прочитать тут - https://webkit.org/blog/17660/introducing-css-grid-lanes/