Опубликовано: 19 сентября 2024 г., Последнее обновление: 13 февраля 2026 г.
Рабочая группа CSS объединила два предложения по синтаксису CSS Masonry в один проект спецификации . Группа надеется, что это упростит сравнение двух вариантов и позволит принять окончательное решение. Команда Chrome по-прежнему считает, что отдельный синтаксис Masonry был бы наилучшим вариантом. Хотя самая большая проблема с производительностью, упомянутая в нашем предыдущем посте, решена, остаются опасения по поводу синтаксиса, начальных значений и того, насколько легко будет освоить версию, объединенную с Grid.
Однако, чтобы проверить наши предположения, мы проработали несколько примеров, чтобы показать, как будет работать каменная кладка с каждым вариантом. Ознакомьтесь с примерами в этом посте и оставьте свой отзыв, чтобы мы могли принять решение и продолжить работу над этой функцией.
В этом посте не рассматриваются все возможные варианты использования, однако ясно, что разделение макета «кирпичная кладка» и макета «сетка» не приведет к потере функциональности этой функции. На самом деле, может быть верно обратное. Как вы увидите в этом посте, версия display: masonry создает новые возможности и более простой синтаксис. Кроме того, многие разработчики выражали опасения по поводу того, что изменение порядка элементов в макете «кирпичная кладка» может вызвать проблемы с доступностью. Эта проблема также решается для обеих версий синтаксиса с помощью предлагаемого свойства reading-flow .
Базовая схема каменной кладки
Именно такую схему чаще всего представляют себе, когда думают о каменной кладке. Предметы располагаются рядами, и после того, как первый ряд выложен, последующие предметы перемещаются на место, оставленное более короткими предметами.
С display: masonry
Для создания макета с блочной структурой используйте значение параметра masonry для свойства display . Это создаст макет с блочной структурой, где направляющие для столбцов будут определены вами (или будут определены содержимым), а блочная структура — по другой оси. Первый элемент будет отображаться в начале блока и в линию (следовательно, в верхнем левом углу), а остальные элементы будут располагаться в направлении линии.
Для определения дорожек используйте masonry-template-tracks со значениями списка дорожек, как это используется в CSS-сетке.
.masonry {
display: masonry;
masonry-template-tracks: repeat(3, 1fr);
gap: 10px;
}
С display: grid
Для создания макета типа «кирпичная кладка» сначала создайте макет типа «сетка», используя значение свойства display со значением grid . Определите столбцы с помощью свойства grid-template-columns , а затем задайте свойству grid-template-rows значение ` masonry .
Это создаст макет, как и следовало ожидать от элементов сетки с автоматическим размещением, однако элементы в каждом ряду будут использовать макет типа «кирпичная кладка» и будут перестраиваться, чтобы занять место, оставленное более мелкими элементами в предыдущем ряду.
.masonry {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: masonry;
gap: 10px;
}
При сравнении двух вариантов следует учитывать следующие моменты.
Существенное различие между этими методами заключается в том, что при использовании версии display: masonry вы получаете макет в виде кладки, даже если не указываете никаких дорожек с помощью masonry-template-tracks . Поэтому display: masonry может быть всем, что вам нужно. Это связано с тем, что начальное значение masonry-template-tracks равно repeat(auto-areas, auto) . Макет создает столько дорожек автоматического размера, сколько поместится в контейнере.
Обратный поток с использованием каменной кладки
В спецификации описаны способы изменения направления потока кладки. Например, можно изменить направление потока таким образом, чтобы он отображался от торца блока вверх.
С display: masonry
Создайте макет с display: masonry , затем используйте masonry-direction со значением column-reverse .
.masonry {
display: masonry;
masonry-template-tracks: repeat(3, 1fr);
masonry-direction: column-reverse;
}
С display: grid
Создайте макет типа "кирпичная кладка" с display: grid и grid-template-rows: masonry . Затем используйте свойство grid-auto-flow с новым значением row-reverse , чтобы элементы располагались от блочного края контейнера сетки.
.masonry {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: masonry;
grid-auto-flow: row-reverse;
}
При сравнении двух вариантов следует учитывать следующие моменты.
Версия display: masonry очень похожа на работу flexbox. Направление расположения столбцов можно изменить с помощью свойства masonry-direction со значением column-reverse .
В версии CSS-сетки используется свойство grid-auto-flow . В текущем виде grid-auto-flow: row-reverse и grid-auto-flow: column-reverse дадут одинаковый эффект. Это может сбивать с толку, поскольку можно ожидать от них разных результатов.
Каменная кладка для рядов
Вы также можете изменить направление, чтобы определить строки.
С display: masonry
Создайте макет в стиле «кирпичная кладка» с display: masonry , затем установите значение параметра masonry-direction равным row . Если вам не нужен определенный размер блока для строк, указывать размер дорожек не нужно, так как по умолчанию установлено значение auto , поэтому дорожки будут подстраиваться под содержимое, которое они содержат.
.masonry {
display: masonry;
masonry-direction: row;
}
С display: grid
.masonry {
display: grid;
grid-template-columns: masonry;
grid-template-rows: repeat(3, 1fr);
}
При сравнении двух вариантов следует учитывать следующие моменты.
Как и в случае с обратным потоком, изменение версии display: masonry с columns на rows означает изменение значения параметра masonry-direction . В случае версии grid вам потребуется поменять местами значения свойств grid-template-columns и grid-template-rows . Или, если используется сокращенная запись, измените порядок синтаксиса.
В обоих приведенных примерах переключения потока версия display: masonry кажется более интуитивно понятной. Управление потоком осуществляется с помощью единственного свойства masonry-direction , которое принимает одно из следующих значений:
-
row -
column -
row-reverse -
column-reverse
Затем добавьте всю необходимую информацию о размерах в файл masonry-template-tracks , предполагая, что значение по умолчанию auto вам не подходит.
В случае с сеткой для изменения направления потока необходимо использовать свойство grid-auto-flow , а для изменения направления потока в строке — изменить значение свойства grid-template-* . Также в текущем синтаксисе сетки невозможно оставить значение оси сетки неопределенным. Свойства grid-template-* всегда необходимо указывать для оси, у которой значение не равно masonry .
Расположите элементы
В обеих версиях вы можете явно размещать элементы, используя линейную компоновку, с которой вы знакомы по сетке. В обеих версиях вы можете размещать элементы только по оси сетки , то есть по оси с предопределенными направляющими; вы не можете размещать элементы по оси, которая отвечает за разметку в виде кирпичной кладки.
С display: masonry
Следующий CSS-код определяет макет в виде кирпичной кладки с четырьмя столбцами. Таким образом, ось сетки — это столбцы. Элемент с a размещается от первой строки столбца до третьей строки столбца, занимая две дорожки с новыми свойствами masonry-track-* . Это также можно определить как сокращенную запись masonry-track: 1 / 3; .
.masonry {
display: masonry;
masonry-template-tracks: repeat(4, 1fr);
}
.a {
masonry-track-start: 1;
masonry-track-end: 3;
}
С display: grid
Приведенный ниже CSS определяет макет в виде кирпичной кладки с четырьмя столбцами. Таким образом, ось сетки — это столбцы. Элемент с a размещается от первой строки столбца до третьей строки столбца, занимая две дорожки со свойствами grid-column-* . Это также можно определить как сокращенную запись grid-column: 1 / 3; .
Если ось сетки — столбцы, то свойства grid-row-* будут игнорироваться, а если ось сетки — строки, то свойства grid-columns-* будут игнорироваться.
.masonry {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: masonry;
}
.a {
grid-column-start: 1;
grid-column-end: 3;
}
Вы можете использовать именованные линии с обоими синтаксисами. В следующих примерах показана сетка с двумя столбцами, названными a .
С display: masonry
Именованные линии определяются в значении параметра track в файле masonry-template-tracks . Этот элемент можно разместить после любой линии с именем a .
.masonry {
display: masonry;
masonry-template-tracks: 100px [a] auto [a] auto 100px;
}
.item {
masonry-track: a;
}
С display: grid
Именованные строки определяются в значении параметра grid-template-columns определяющего список треков. Элемент размещается после первой строки с именем ` a . Если определено свойство grid-row оно будет проигнорировано.
.masonry {
display: grid;
grid-template-columns: 100px [a] auto [a] auto 100px;
grid-template-rows: masonry;
}
.item {
grid-column: a;
grid-row: a; /* ignored */
}
В обоих синтаксисах можно использовать и именованные области. В следующих примерах показана сетка с тремя дорожками, названными "a", "b" и "c".
С display: masonry
Направления именуются в соответствии со значением параметра masonry-template-areas . Поскольку размеры направлений не определены, для всех трех по умолчанию используется auto размер. Элемент размещается в направлении «a».
.masonry {
display: masonry;
masonry-template-areas: "a b c";
}
.item {
masonry-track: a;
}
Это работает одинаково как при определении строк, так и столбцов; единственное различие будет заключаться в свойстве masonry-direction .
С display: grid
Для столбцов синтаксис практически идентичен. Аналогично, поскольку размеры дорожек не определены, для всех трех по умолчанию используется auto размер, но вам все равно необходимо явно указать, что другая ось представляет собой кирпичную кладку:
.masonry {
display: grid;
grid-template-areas: "a b c";
grid-template-rows: masonry;
}
.item {
grid-column: a;
}
Однако для строк значение необходимо записывать иначе, поскольку grid-template-areas фактически определяет двумерную область, и каждая строка записывается как отдельная строка:
.masonry {
display: grid;
grid-template-areas: "a" "b" "c"; /* Note the difference, each row is quoted. */
grid-template-columns: masonry;
}
.item {
grid-row: a;
}
При сравнении двух вариантов следует учитывать следующие моменты.
При любом расположении синтаксис display: masonry лучше подходит для переключения направления. Поскольку свойство masonry-track-* работает в любом направлении, соответствующем оси сетки, для изменения направления достаточно изменить значение masonry-direction . В версии для сетки, как минимум, потребуются дополнительные свойства для включения переключения. Однако, см. предыдущие примеры, где описаны другие способы, которыми изменение направления в версии для сетки может быть более сложным.
Стенография
В этом посте для большей ясности использованы полные обозначения, однако как display: masonry , так и display: grid можно определить с помощью сокращенных обозначений.
С display: masonry
В сокращенной display: masonry используется ключевое слово masonry . Для создания базовой разметки в стиле «кирпичная кладка» используйте следующий CSS-код:
.masonry {
display: masonry;
masonry: repeat(3, 1fr);
}
Для создания простой кладки из блоков, расположенных рядами:
.masonry {
display: masonry;
masonry: row;
}
Для обозначения дорожек и расположения по рядам используется сокращенная запись:
.masonry {
display: masonry;
masonry: repeat(3, 1fr) row;
}
С display: grid
Для создания базовой разметки кладки с использованием сокращенной grid .
.masonry {
display: grid;
grid: masonry / repeat(3, 1fr);
}
Для создания простой кладки из блоков, расположенных рядами:
.masonry {
display: grid;
grid: repeat(3, auto) / masonry;
}
В более сложных примерах, поскольку общий синтаксис display:masonry проще, в сокращенную запись можно включить больше свойств, не усложняя ее.
Например, представьте, что вы создали три столбца с названиями «a», «b» и «c», заполняемые снизу вверх.
С display:masonry
В display: masonry все три слова могут быть объединены в сокращенном варианте:
.masonry {
display: masonry;
masonry: column-reverse "a b c";
}
Поскольку размеры автоматически задаются, указывать их не нужно, но если вам нужен конкретный размер, его можно добавить. Например: masonry: column-reverse 50px 100px 200px "ab c"; .
Кроме того, каждый компонент можно свободно переупорядочивать; нет необходимости запоминать какой-либо конкретный порядок. А если вы хотите использовать строки, вам нужно всего лишь заменить column-reverse на row или row-reverse ; остальная часть синтаксиса остается неизменной.
С display: grid
В display: grid эти три параметра необходимо задавать отдельно:
.masonry {
display: grid;
grid-template-rows: masonry;
grid-template-areas: "a b c";
grid-auto-flow: wrap-reverse;
}
Как и в примере с каменной кладкой, здесь все колонны имеют auto размер, но если вы хотите указать размеры явно, вы можете это сделать:
.masonry {
display: grid;
grid: masonry / 50px 100px 200px;
grid-template-areas: "a b c";
grid-auto-flow: wrap-reverse;
}
Или, если вы хотите использовать «сетку» для одновременного задания размеров и названий областей:
.masonry {
display: grid;
grid: "a b c" masonry / 50px 100px 200px;
grid-auto-flow: wrap-reverse;
}
В обоих этих примерах порядок строго обязателен, и он будет другим, если вам нужны строки. Например, изменение на строки будет выглядеть так:
.masonry {
display: grid;
grid: 50px 100px 200px / masonry;
grid-template-areas: "a" "b" "c";
}
Или, если говорить кратко:
.masonry {
display: grid;
grid: "a" 50px "b" 100px "c" 200px / masonry;
}
При сравнении двух вариантов следует учитывать следующие моменты.
Сокращенная display: masonry вероятно, будет широко использоваться, учитывая ее относительную простоту. Во многих случаях для «стандартной» схемы расположения блоков в каменной кладке достаточно задать только определения дорожек; все остальные значения могут принимать значения по умолчанию.
Версия display: grid использует существующую сокращенную запись grid , которая является довольно сложной и, по нашему опыту, реже используется разработчиками. Как показано в предыдущих примерах, даже при использовании для простых макетов типа «кирпичная кладка» требуется осторожность при задании порядка значений.
Другие соображения
В этой статье рассматриваются некоторые распространенные сегодня сценарии использования, однако мы не знаем, что ждет Grid и Masonry в будущем. Большой аргумент в пользу использования отдельного синтаксиса display: masonry заключается в том, что он позволяет этим двум типам шаблонов расходиться в будущем. В частности, при заданных начальных значениях — таких как значения для masonry-template-tracks — может быть полезно делать что-то отличное от того, что делает Grid. Мы не можем изменить значения по умолчанию для Grid, если используем версию display: grid , что может ограничить возможности, которые мы можем захотеть реализовать в будущем.
В этих примерах вы можете увидеть места, где браузеру приходится игнорировать свойства, допустимые в сетке, если используется Masonry. Например grid-template-areas , где большинство значений игнорируются, поскольку он определяет двухмерную сетку, тогда как в Masonry мы полностью определяем только одно направление.
Оставьте свой отзыв.
Ознакомьтесь с этими примерами, а также с проектом спецификации, в котором каждая версия представлена вместе с другими. Поделитесь своим мнением, оставив комментарий к выпуску 9041 , или, если вы предпочитаете написать пост в своем блоге или в социальных сетях, обязательно сообщите нам об этом на X или LinkedIn .