CSS Grid Lanes: Новый нативный Masonry-макет

Вы уже создавали макеты в стиле Pinterest. Вы использовали JavaScript-библиотеки, хаки с CSS multi-column или сложные обходные решения на Grid с вычисляемыми диапазонами строк. Каждый подход работает, но ни один не ощущается нативным.

CSS Grid Level 3 исследует возможность нативного masonry-поведения внутри Grid. Одно из текущих предложений вводит display: grid-lanes как возможный синтаксис для этой функции — но прежде чем вы начнёте рефакторить production-код, вам нужно понять, на каком этапе всё находится в начале 2026 года.

Эта статья охватывает основную концепцию CSS Grid Lanes, чем она отличается от традиционного Grid, реальное состояние поддержки браузерами и что следует учитывать перед её внедрением.

Что на самом деле делает CSS Grid Lanes

Традиционный CSS Grid работает одновременно по двум осям. Вы определяете и строки, и столбцы, а элементы занимают явные ячейки. Это создаёт предсказуемые прямоугольные макеты — но также оставляет пробелы, когда элементы имеют разную высоту.

Черновик CSS Grid Level 3 вводит masonry-поведение, иногда называемое “grid lanes”, где вы определяете треки по одной оси (обычно столбцы), а элементы плотно упаковываются по другой оси с использованием masonry-алгоритма. Элементы перетекают в ту полосу, где больше всего доступного пространства, автоматически заполняя пробелы.

Текущий обсуждаемый синтаксис черновика выглядит так:

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

Однако синтаксис и поведение всё ещё развиваются. Более ранние эксперименты использовали значения вроде masonry внутри grid-template-rows или grid-template-columns, и некоторые движки реализовали прототипные версии этих подходов. Рабочая группа CSS продолжает уточнять, как masonry интегрируется в Grid Level 3. См. последний черновик CSS Grid Layout Module Level 3.

Чем Grid Lanes отличается от стандартного Grid

С display: grid элементы соблюдают треки как строк, так и столбцов. Более короткие элементы оставляют пустое пространство под собой до начала следующей строки.

При masonry-поведении Grid только одна ось имеет определённые треки. Элементы по другой оси располагаются в зависимости от доступного пространства, а не строгих границ строк. Это создаёт характерный ступенчатый вид masonry-макетов.

Большинство знакомых возможностей Grid — таких как определение треков столбцов и явное размещение — концептуально остаются доступными, но реализации могут различаться, пока функция экспериментальная. Поведение, такое как spanning и граничные случаи размещения, пока не полностью совместимо между движками.

Водопад против кирпичных макетов

Определите столбцы с помощью grid-template-columns, и элементы будут течь вертикально — классический водопадный макет. Определите строки с помощью grid-template-rows (в экспериментальных реализациях), и элементы будут течь горизонтально в кирпичном стиле.

Детали, такие как поведение потока и управление порядком, всё ещё обсуждаются в спецификации и могут отличаться между браузерными превью. Избегайте полагаться на нестандартные или черновые свойства, если не проверите поддержку в целевом браузере.

Поддержка браузерами: реалистичная картина

Здесь планирование production-среды усложняется.

По состоянию на начало 2026 года нативное masonry-поведение в CSS Grid остаётся экспериментальным во всех основных браузерах:

• Safari Technology Preview имеет одну из наиболее полных прототипных реализаций.
• Браузеры на основе Chromium экспериментировали с синтаксисом, связанным с masonry, за флагами, включая более ранние значения треков masonry.
• Firefox реализовал masonry-эксперименты за конфигурационными флагами.

Ни один крупный стабильный канал браузера не предлагает полностью совместимую поддержку без флагов на момент написания. Вы можете отслеживать статус совместимости через Can I use и заметки о релизах браузеров.

Рабочая группа CSS продолжает уточнять детали интеграции в Grid Level 3.

Практический вывод: Не отправляйте синтаксис masonry-стиля Grid в production без фолбэков.

Стратегия прогрессивного улучшения

Определение возможностей позволяет экспериментировать там, где есть поддержка, с корректным откатом:

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

@supports (display: grid-lanes) {
  .container {
    display: grid-lanes;
  }
}

Браузеры без поддержки отрисуют стандартный Grid-макет. Элементы выровняются по строкам вместо плотной упаковки — приемлемый базовый вариант для многих случаев использования.

Поскольку синтаксис может измениться до стабилизации, рассматривайте это как прогрессивное улучшение, а не долгосрочную production-зависимость.

Проблемы доступности и порядка в исходном коде

Masonry-макеты создают проблему несоответствия DOM-порядка и визуального порядка. Элементы появляются в позициях, определённых алгоритмом упаковки, а не их порядком в исходном коде. Пользователь, перемещающийся по контенту с помощью Tab, может непредсказуемо прыгать по макету.

Это не уникально для Grid Lanes — это присуще masonry-макетам. Вы должны тщательно тестировать клавиатурную навигацию, особенно для контента, где последовательность чтения важна.

Программы чтения с экрана следуют порядку DOM независимо от визуального размещения. Убедитесь, что ваша HTML-структура имеет смысл при линейном чтении.

Заключение

Для экспериментов, прототипов и слоёв прогрессивного улучшения masonry-поведение Grid стоит изучать уже сейчас. Направление становится яснее в Grid Level 3, и практический опыт сегодня окупится, когда поддержка браузерами созреет.

Для production-функций, требующих последовательного кроссбраузерного поведения, подождите. Отслеживайте обсуждения спецификации и заметки о реализации в браузерах перед внедрением.

Нативный CSS masonry был давним запросом. Он наконец обретает форму — но пока не полностью стандартизирован и не совместим. Проверьте, что поддержка браузерами соответствует вашим требованиям, перед широким внедрением.

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

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..