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

Patrick Brosset

Alison Maher

Опубликовано: 23 июля 2025 г.

Команды 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-сетки, Flexbox или многоколоночной макета.

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

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

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

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

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

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

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

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

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

Коллекция фотографий с разным размером столбцов, а некоторые фотографии занимают несколько столбцов.

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

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

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

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

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

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

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

Важно помнить не о том, что сетка, flexbox или многоколоночная структура хуже, чем Masonry. Это отличные типы макетов, имеющие множество вариантов применения. Суть в том: если вам нужна Masonry, то CSS Masonry — это то, что вам нужно.

Состояние кладки CSS

Рабочая группа CSS разрабатывает спецификацию Masonry для спецификации CSS Grid Level 3. Спецификация всё ещё находится в стадии разработки и временно включает два различных варианта синтаксиса. Первый из них использует новое ключевое слово для свойства display , а второй вариант Masonry напрямую интегрируется в макет 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 masonry вместо использования одного из двух свойств шаблона сетки.

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

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

Создайте свой собственный макет кладки CSS

Давайте немного развлечемся и создадим макет каменной кладки CSS.

Хотя синтаксис CSS Masonry всё ещё обсуждается, нашу реализацию этой функции можно протестировать в Chromium уже сегодня, включив флаг CSS Masonry Layout, как описано в статье «Проверьте CSS 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

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

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

.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"
}

Рабочая группа CSS всё ещё обсуждает эту masonry . Попробуйте её сегодня и расскажите нам о своих впечатлениях.

Выбирайте индивидуальные размеры дорожек

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

.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, сообщите нам об этом, оставив комментарий к Issue 11243 , или, если вы предпочитаете написать пост в своем собственном блоге или в социальных сетях, обязательно дайте нам знать в X или LinkedIn .

CSS-масонство всё ещё реализуется в Chromium. Если вы решите протестировать его, учтите, что мы всё ещё активно работаем над ним, и вы можете столкнуться с ситуациями, когда оно работает не так, как ожидалось. Среди текущих ограничений — плотная упаковка, обратное размещение, поддержка подсеток, поддержка out-of-flow, поддержка базовых линий, поддержка DevTools, поддержка фрагментации, поддержка декорирования пробелов и другие.

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