Кирпичик за кирпичиком: помогите нам создать 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, flexbox или макета с несколькими колонками.

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

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

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

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

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

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

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

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

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

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

Обходные решения и их ограничения

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

• Снижение производительности. Использование библиотек JavaScript или собственного кода для имитации макета CSS Masonry может привести к снижению производительности и ухудшению пользовательского опыта.
• Более сложный код.
  • Гарантировать правильное размещение элементов и распределение пространства в сетке CSS, flexbox или многоколоночном макете, чтобы имитировать макет CSS masonry, сложно.
  • Работа с определенными функциями, такими как элементы, охватывающие более одного столбца или строки, настраиваемый порядок элементов или настройка области просмотра, также может привести к сложностям и ограничениям.
• Сложность обслуживания. Сложный код CSS или JavaScript труднее поддерживать.

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

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

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

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

Суть не в том, что сетка, flexbox или многоколоночный макет хуже, чем masonry. Это отличные типы макетов, которые имеют множество вариантов использования. Суть в том, что если вам нужен макет каменной кладки, то CSS-каменная кладка — это то, что вам нужно.

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

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

Использовать помощника (display: masonry)

Этот синтаксис представляет CSS-сетку как собственный тип display. Подробную информацию о подходе и его мотивации можно найти в записи блога Feedback needed: How should we define CSS masonry? (Нужны отзывы: как определить CSS-макет Masonry?) от команды Google Chrome, а также в оставшейся части этой записи. Текущий прототип в Chromium основан на этом предложении.

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

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

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

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

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

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

Как создать собственный макет CSS Masonry

Давайте повеселимся и создадим макет каменной кладки 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 masonry. Этот новый размер дорожки по умолчанию является значением repeat(auto-fill, auto). Это значение позволяет создать красивый макет без необходимости определять размеры дорожек:

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

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

В сетке CSS все элементы размещаются до того, как задаются размеры дорожек, а значит, такое определение автоматического размера дорожки невозможно. Однако с CSS masonry это ограничение больше не применяется, поскольку размещение и размер взаимосвязаны и упрощены. Теперь, когда это ограничение снято, мы можем предоставить более полезный размер дорожки по умолчанию для макетов 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"
}

Сокращенная запись masonry все ещё обсуждается рабочей группой 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, и спецификация скоро будет обновлена.

Другие доступные свойства

Для изменения размера и размещения элементов в контейнере masonry можно использовать те же свойства, что и в CSS Grid, например grid-row, grid-column, grid-area, grid-template-areas или order. Используйте все возможности CSS Grid при создании макета Masonry.

Запрос отзывов

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

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

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

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

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