Что такое Masonry Layout
Masonry — это способ расположить элементы в виде «каменной кладки», когда блоки разной высоты заполняют пространство по колонкам без неровных промежутков. Название происходит от английского masonry — «кладка из камня»: каждый элемент подстраивается под ширину колонки, а высота складывается как в кирпичной стене.
Такой тип макета стал известен ещё в 2010-х, когда Дэйв ДеСандро создал библиотеку Masonry.js. Позже этот стиль стал фирменным для Pinterest и других сайтов, где карточки контента имеют разную высоту. На практике masonry-раскладка даёт визуальный ритм и плотное заполнение пространства — без пустых «дыр», характерных для обычных сеток. Но до сих пор это приходилось делать через JavaScript или CSS-хаки.
Почему CSS до сих пор не умел masonry
Grid и Flexbox — это мощные системы компоновки, но они изначально создавались для упорядоченных макетов: где элементы выстраиваются по строкам или колонкам в чёткой сетке. У каждой строки и каждой колонки есть фиксированная структура — браузер знает, где они начинаются и где заканчиваются.
Masonry же работает по-другому. Он требует, чтобы каждая колонка существовала независимо и заполнялась своими элементами без учёта соседних. То есть элементы в одной колонке могут быть выше или ниже, и это никак не влияет на другие колонки.
Основная сложность в том, что Grid строит сетку сверху вниз — сначала создаёт строки, потом размещает в них элементы и только затем рассчитывает высоты. А masonry требует обратного подхода: сначала нужно создать колонки, потом помещать в них элементы один за другим, пока не закончится место, и только потом переходить к следующей колонке.
Из-за этого принципа работы стандарт CSS просто не мог «встроить» masonry как ещё одно свойство — для этого пришлось бы полностью менять логику расчёта сетки внутри браузера.
Варианты реализации
1. Masonry как часть Grid
Первая идея, предложенная веб-разработчиком и членом CSS Working Group Рейчел Эндрю, — встроить masonry прямо в CSS Grid через свойство:
Такой подход позволил бы использовать всю мощь Grid — подсетки, автоматическое размещение элементов (auto-placement), гибкое выравнивание и управление областями.
Однако на практике возникло несколько серьёзных трудностей:
- Производительность. Когда Grid и Masonry объединяются, браузеру приходится пересчитывать положение элементов дважды: сначала для сетки, потом для «каскадного» расположения. На больших или вложенных макетах это заметно замедляет отрисовку.
- Логика размещения. Grid и Masonry используют противоположные алгоритмы. Grid идёт по строкам и столбцам, а Masonry — заполняет колонки независимо. Из-за этого одни и те же правила (grid-auto-flow, grid-template-rows) начинают вести себя непредсказуемо.
- Доступность. Экранные ридеры читают контент в порядке его расположения в DOM. Но при «masonry-вёрстке» визуальный порядок может сильно отличаться от реального, что сбивает пользователей, использующих озвучку или клавиатурную навигацию.
Из-за этих проблем в 2023 году спецификацию решили заморозить, чтобы пересмотреть концепцию и избежать внедрения нестабильного поведения в браузеры.
Несмотря на заморозку экспериментальная поддержка grid-template-rows: masonry появилась в Safari Technology Preview и iOS/iPadOS начиная с 2024 года. Для включения нужно активировать экспериментальные функции WebKit.
2. Masonry как отдельный модуль
В 2024–2025 годах обсуждение возобновилось: появился новый черновик CSS Grid Layout Module Level 3, в котором masonry рассматривается как самостоятельный режим отображения, не зависящий от Grid.
Предлагается использовать синтаксис вроде:
3. Универсальная реализация
Другой путь — унифицированный вариант, в котором появятся новые свойства: item-flow, item-direction и item-wrap. Они задумываются как единая система компоновки, способная заменить привычные display: flex, display: grid и будущий display: masonry.
Идея в том, чтобы разработчик мог описывать поведение элементов одинаково для всех типов раскладок.
Например:
- item-flow определяет, как движется поток элементов — построчно, по колонкам или «каскадом», как в Masonry;
- item-direction задаёт направление (вперёд, назад, сверху вниз и т. д.);
- item-wrap управляет переносом элементов на новую строку или колонку.
Такой подход упростит создание сложных макетов — можно будет одной комбинацией свойств описывать и флекс, и грид, и masonry-подобные сетки.
Пока это только экспериментальная идея, но первые тесты уже доступны в Chrome 140+ (через флаг #enable-experimental-web-platform-features).
Почему masonry ещё не для продакшена
На данный момент спецификация masonry находится в статусе Working Draft, а это значит, что свойства и синтаксис могут ещё измениться. Нативная поддержка ограничена: в браузерах masonry доступен только в экспериментальном режиме Chrome через флаг. Firefox и Safari пока не имеют ни одной публичной реализации, поэтому использовать display: masonry или новые свойства Item Flow в продакшене пока рискованно. Лучше продолжать применять проверенные методы — Grid, Flexbox или JavaScript — и тестировать нативную реализацию отдельно.
Как masonry упростит жизнь разработчиков
Когда masonry станет частью стандарта, создавать динамические галереи станет гораздо проще — без JavaScript-библиотек, с лёгкой адаптацией карточек под любые разрешения и использованием знакомых CSS-механизмов, таких как gap, выравнивание и justify. Это позволит избежать избыточного HTML и inline-скриптов: вместо тяжёлых решений вроде Masonry.js или CSS Columns достаточно будет нескольких строк CSS.
Masonry-раскладка закрывает один из последних больших пробелов в экосистеме CSS. Если Flexbox решает задачу выравнивания, а Grid — построения сеток, то masonry обеспечивает «живые» динамичные галереи без костылей. Путь к стандарту был долгим, но в 2025 году стало ясно, что официальное решение уже близко. Остаётся дождаться, когда браузеры включат поддержку по умолчанию, и тогда фраза “Pinterest-style layout” перестанет ассоциироваться с JavaScript и станет просто частью CSS.