По кирпичику: помогите нам построить CSS Masonry

Patrick Brosset

Alison Maher

Опубликовано: 23 июля 2025 г., Последнее обновление: 13 февраля 2026 г.

Команды разработчиков Microsoft Edge и Google Chrome рады сообщить, что CSS-фреймворк Masonry готов к раннему тестированию разработчиками в Chrome и Edge версии 140.

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

Протестируйте CSS Masonry в Chromium уже сегодня!

Сегодня протестируем CSS Masonry:

1. Используйте Chrome или Edge версии 140 или более поздней (или другой браузер на основе Chromium с соответствующей версией).
2. Откройте в новой вкладке about:flags .
3. Найдите "CSS Masonry Layout".
4. Включите флаг.
5. Перезапустите браузер.

Включив эту функцию, вы можете увидеть ее в действии , ознакомившись с демонстрационными примерами Microsoft Edge (просмотреть исходный код демонстрационных примеров ), или продолжить чтение, чтобы узнать больше о функции и доступном синтаксисе.

Что такое каменная кладка?

CSS Masonry — это режим компоновки, позволяющий создавать кирпичеобразное расположение элементов, чего сложно добиться с помощью CSS Grid, Flexbox или многоколоночной компоновки.

CSS-структура "кирпичная кладка" может использоваться для упорядочивания элементов в столбцовом или строковом формате, при этом элементы, размещенные внутри этих столбцов или строк, могут быть свернуты.

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

Элементы вашей компоновки ограничены только в одном направлении и могут свободно перемещаться в другом, независимо от находящихся рядом элементов. Кирпичная кладка отличается от сетки тем, что её направляющие определены только в одном направлении.

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

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

Такое автоматическое размещение может привести к очень интересным результатам, которых веб-дизайнеры давно пытались добиться. В качестве примера посмотрите демонстрацию фотогалереи Нью-Йорка , которая показывает, как фотографии могут отображаться компактно в нескольких колонках, в то время как определенные элементы (заголовок в этом примере) могут занимать несколько колонок:

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

Макет блога, отображающий миниатюру и описание каждой публикации.

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

Подборка фотографий с разным размером столбцов, причем некоторые фотографии занимают несколько столбцов.

Обходные пути и их ограничения

Внедрение этого шаблона проектирования в веб-разработке сегодня требует использования либо библиотек JavaScript, либо обходных путей с применением CSS-сеток, flexbox или многоколоночной структуры. Однако это может иметь и недостатки, в том числе:

• Снижение производительности : использование библиотек JavaScript или пользовательского кода для имитации CSS-макетов приводит к снижению производительности, что может негативно сказаться на пользовательском опыте.
• Более высокая сложность кода :
  • Гарантировать правильное размещение элементов и распределение пространства внутри CSS-сетки, flexbox или многоколоночной структуры для имитации CSS-макета типа "кирпичная кладка" — задача непростая.
  • Обработка специфических функций, таких как элементы, занимающие более одного столбца или строки, нестандартный порядок элементов или адаптация к области просмотра, также может привести к сложностям и ограничениям.
• Более высокая сложность обслуживания : сложный пользовательский CSS или JavaScript код сложнее поддерживать.

CSS Grid — это удивительный режим компоновки, очень гибкий и позволяющий создавать множество различных стилей макетов, будь то для всей веб-страницы, компонента или просто для выравнивания отдельных элементов. Однако он не обладает теми же характеристиками, что и Masonry.

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

Как и в случае с макетом «кирпичная кладка», flexbox учитывает только одно направление, позволяя элементам самостоятельно определять занимаемое ими пространство в другом направлении. Это означает, что вы можете получить макет, похожий на макет «кирпичная кладка», используя flexbox, если вас устраивает расположение элементов в направлении блоков, по одной колонке за раз. Для переноса элементов на новую строку flex-контейнера и создания новой колонки, flex-контейнеру также потребуется задать размер или высоту блока.

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

Важно помнить, что сетки, flexbox или многоколоночная структура хуже, чем мозаичная. Это отличные типы макетов с множеством вариантов применения. Суть в том: если вам нужен макет в стиле мозаичной структуры, то CSS-мозаичная структура вам его обеспечит.

Состояние CSS-макета

Рабочая группа CSS разрабатывает синтаксис "кирпичной кладки" в спецификации CSS Grid Level 3. Спецификация все еще находится в стадии разработки и временно включает два различных предлагаемых синтаксиса. В первом из них используется новое ключевое слово для свойства display , а во втором синтаксис "кирпичной кладки" напрямую интегрирован в макет CSS Grid.

Использовать display: masonry

Этот синтаксис представляет CSS-кирпич как отдельный тип display . Более подробную информацию о подходе и его обосновании можно найти в статье блога «Требуется обратная связь: как следует определять CSS-кирпич?» от команды Google Chrome, а также в оставшейся части этой статьи. Текущий прототип в Chromium основан на этом предложении.

display: grid; grid-template-*: masonry;

В этом синтаксисе CSS-макет «кирпичная кладка» напрямую интегрирован в CSS-сетку. Режим «кирпичной кладки» активируется путем применения ключевого слова masonry к определению grid-template-columns в случае макета «кирпичная кладка» на основе строк или к определению grid-template-rows в случае макета «кирпичная кладка» на основе столбцов.

Более подробную информацию об этом предложении и его обосновании можно найти в публикации WebKit « Помогите нам выбрать окончательный синтаксис для Masonry в CSS» .

Обратите внимание, что альтернативой этому предложению является свойство item-pack и ключевое слово collapse , которые будут запускать CSS-макет вместо использования одного из двух свойств шаблона сетки.

После публикации сообщений командами Chrome и WebKit рабочая группа CSSWG продолжила обсуждение общего синтаксиса для дальнейшего развития. Ваши отзывы помогут в дальнейшем совершенствовании на этих форумах.

Более подробную информацию о текущем состоянии обсуждений можно найти в выпуске 11593 , где изложен текущий набор тем для обсуждения синтаксиса в Masonry, и в выпуске 11243, где представлено краткое изложение дискуссии о синтаксисе на данный момент.

Создайте собственную CSS-разметку в стиле «кирпичной кладки».

Давайте немного повеселимся и создадим макет в стиле «кирпичной кладки» с помощью CSS.

Хотя синтаксис CSS Masonry всё ещё обсуждается, нашу реализацию этой функции можно протестировать в Chromium уже сегодня, включив флаг CSS Masonry Layout, как описано в разделе «Тестирование CSS Masonry сегодня» . Следующие примеры демонстрируют возможности пробной версии для разработчиков.

Создайте контейнер из кирпичной кладки.

Для создания первого контейнера Masonry на основе столбцов используйте display:masonry и задайте размеры столбцов с помощью grid-template-columns . Поскольку masonry-direction по умолчанию имеет значение column , установка этого свойства необязательна.

.masonry {
  display: masonry;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

Для контейнера типа "кирпичная кладка" с построчным расположением элементов используйте display:masonry , определите размеры строк с помощью grid-template-rows , а затем установите masonry-direction:row .

.masonry {
 display: masonry;
 masonry-direction: row;
 grid-template-rows: repeat(auto-fit, minmax(160px, 1fr));
 gap: 10px;
}

Как вы могли заметить, этот синтаксис немного отличается от первоначального предложения Google . Независимо от используемого триггера для CSS Masonry, рабочая группа CSS решила повторно использовать свойства размера и размещения шаблона сетки в макете CSS Masonry.

Хотя это позволяет более эффективно использовать свойства разных типов макета, вам это может показаться запутанным, и мы будем рады услышать ваше мнение по этому поводу. Мы можем рассмотреть возможность создания более общих псевдонимов для таких свойств, как grid-template-columns и grid-template-rows , например, template-columns или template-rows , которые можно использовать как для сетки, так и для макета типа «кирпичная кладка».

Используйте размер дорожки по умолчанию.

Новый тип отображения дает возможность переосмыслить значения по умолчанию для свойств.

В режиме сетки grid-template-columns и grid-template-rows по умолчанию имеют значение none , что, как правило, приводит к созданию одного столбца или строки. Для режима кладки такое значение по умолчанию чаще всего приводит к нежелательной компоновке.

В Chromium добавлено новое определение для параметра none , которое заменит размер дорожки по умолчанию в CSS-макетах. Этот новый размер дорожки по умолчанию определяется значением repeat(auto-fill, auto) . Это значение позволяет создать красивый макет в стиле «макет» без необходимости вообще определять размеры дорожки:

.masonry {
  display: masonry;
  gap: 10px;
}

Как показано на изображении, контейнер для каменной кладки позволяет создавать столько колонн автоматического размера, сколько поместится в доступном пространстве.

В CSS Grid все элементы размещаются до того, как задаются размеры дорожек, что означает невозможность автоматического определения размеров дорожек. Однако в CSS Masonry это ограничение больше не действует, поскольку размещение и определение размеров взаимосвязаны и упрощены. Снятие этого ограничения позволяет нам задавать более удобный размер дорожек по умолчанию для макетов Masonry.

Попробуйте использовать сокращенную терминологию для обозначения свойств, masonry

Как уже упоминалось, текущая реализация в Chromium использует свойства grid-template-* для определения направления кладки в вашем макете. Однако, поскольку кладка имеет только одно измерение, мы также реализовали сокращенное свойство masonry , которое позволяет одновременно определить как направление кладки, так и направление кладки, без использования запутывающего свойства с префиксом grid- .

Например, следующие два фрагмента кода создадут эквивалентные CSS-контейнеры типа "кирпичная кладка".

.masonry {
 display: masonry;
 masonry: "a a b" 50px 100px 200px row;
}

.masonry {
  display: masonry;
  masonry-direction: row;
  grid-template-rows: 50px 100px 200px;
  grid-template-areas: "a" "a" "b"
}

Использование сокращенной системы обозначения masonry кладке все еще обсуждается рабочей группой CSS. Попробуйте сегодня и поделитесь своим мнением.

Выбирайте направляющие нестандартных размеров.

Что касается определения размеров путей, то каменная кладка так же гибка, как и сетка, позволяя точно настраивать количество и размеры путей на макете. При этом все пути в каменной кладке не обязательно должны быть одинакового размера, например:

.masonry {
 display: masonry;
 masonry: repeat(2, 3rem) repeat(auto-fit, 5rem) 12rem;
}

В этом примере мы определяем сначала две дорожки по 3rem, затем различное количество дорожек по 5rem, а затем одну дорожку по 12rem.

Охват нескольких дорожек

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

Например:

.masonry {
  display: masonry;
  masonry: repeat(auto-fill, minmax(12rem, 1fr));
}

.important-item {
  grid-column: span 2;
}

Также эту возможность можно использовать для соединения нескольких дорожек, чтобы определенные элементы занимали всю длину контейнера:

.masonry {
 display: masonry;
 masonry: repeat(auto-fill, minmax(12rem, 1fr));
}

.full-bleed {
 grid-column: 1 / -1;
}

Именно это используется в демонстрационной версии новостного сайта для отображения рекламы подписки внутри статей.

Точная настройка размещения элементов каменной кладки

В CSS Masonry элементы размещаются в столбце или строке, имеющей кратчайшее текущее положение.

Представьте себе двухколоночный контейнер, состоящий из кирпичной кладки. Если в первой колонке находится элемент высотой 110 пикселей, а во второй — элемент высотой 100 пикселей, то третий элемент будет размещен во второй колонке, на 10 пикселей ближе к началу кирпичной кладки.

Если вы считаете, что разница в 10 пикселей в положении элемента достаточно мала в вашем случае, и предпочитаете разместить третий элемент в первом столбце, чтобы лучше соответствовать порядку элементов в исходном коде, используйте свойство item-tolerance .

Новое свойство item-tolerance регулирует чувствительность при размещении предметов.

В приведенном выше примере вы можете применить item-tolerance: 10px; к вашему контейнеру, чтобы настроить вариативность размещения элементов:

.masonry {
  display: masonry;
  masonry: 200px 200px;
  gap: 10px;
  item-tolerance: 10px;
}

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

Другие доступные объекты недвижимости

Для изменения размера и размещения элементов в сетке контейнера типа «кирпичная кладка» можно использовать те же свойства размера и размещения шаблона, что и в CSS Grid, например, grid-row , grid-column , grid-area , grid-template-areas или order . Оцените всю мощь CSS Grid при создании макета типа «кирпичная кладка».

Призыв к обратной связи

Мы с нетерпением ждём, когда вы изучите CSS-макет, проявите творческий подход и откроете для себя новые возможности, которые он может вам предоставить. Отличный способ начать — ознакомиться с нашими демонстрационными примерами и их исходным кодом и начать создавать собственные примеры в Chromium (не забудьте сначала включить соответствующий флаг ).

Ваши отзывы важны для того, чтобы помочь нам доработать API и убедиться, что он соответствует вашим потребностям в веб-разработке. Попробуйте Masonry и поделитесь своим мнением!

Если у вас есть мысли или отзывы о форме API, сообщите нам об этом, оставив комментарий к проблеме 11243 , или, если вы предпочитаете написать пост в своем блоге или в социальных сетях, обязательно сообщите нам об этом на X или LinkedIn .

CSS-макеты все еще находятся в стадии разработки в Chromium. Если вы будете их тестировать, имейте в виду, что мы все еще активно работаем над этим, и вы можете столкнуться со случаями, когда они будут вести себя не так, как ожидается. Среди текущих ограничений можно отметить плотную упаковку, обратное размещение, поддержку подсеток, поддержку выхода за пределы потока, поддержку базовой линии, поддержку инструментов разработчика, поддержку фрагментации, поддержку декорирования зазоров и многое другое.

Если вы обнаружите ошибку во время тестирования функции, поделитесь своим мнением, создав новый отчет об ошибке в Chromium .