Опубликовано: 19 сентября 2024 г.
Рабочая группа CSS объединила два предложения по каменной кладке CSS в один проект спецификации . Группа надеется, что это облегчит их сравнение и принятие окончательного решения. Команда Chrome по-прежнему считает, что отдельный синтаксис кладки будет лучшим способом продолжить работу. Хотя самая большая проблема с производительностью, упомянутая в нашем предыдущем посте , решена, все еще остаются сомнения по поводу синтаксиса, начальных значений и того, насколько легко будет изучить версию, объединенную с сеткой.
Однако, чтобы проверить наши предположения, мы рассмотрели несколько примеров, показывающих, как кладка будет работать с каждой версией. Взгляните на примеры в этом посте и оставьте свой отзыв, чтобы мы могли принять решение и продолжить работу над этой функцией.
Этот пост не охватывает все возможные варианты использования, однако ясно, что отделение каменной кладки от макета сетки не приведет к потере функциональности этой функции. На самом деле, может быть и наоборот. Как вы увидите в этом посте, версия 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
Чтобы создать макет каменной кладки, сначала создайте макет сетки, используя значение grid для свойства display . Определите столбцы с помощью свойства 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 со столбцов на строки означает изменение значения 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
Именованные строки определены в значении списка дорожек 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;
}
Однако для rows значение должно быть записано по-другому, потому что 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 , которая является довольно сложной и, по нашему опыту, реже используется разработчиками. Как показано в предыдущих примерах, даже при использовании для простых макетов каменной кладки требуется осторожность при установке порядка значений.
Другие соображения
В этом посте рассматриваются некоторые распространенные сегодня варианты использования, однако мы не знаем, что ждет в будущем сетку или каменную кладку. Большой аргумент в пользу использования отдельного display: masonry позволяет им расходиться в будущем. В частности, с начальными значениями, такими как значения для masonry-template-tracks , может быть полезно сделать в masonry что-то другое, чем это делает сетка. Мы не можем изменить настройки сетки по умолчанию, если выберем версию display: grid , это может ограничить то, что мы, возможно, захотим сделать в будущем.
В этих примерах вы можете увидеть места, где браузеру приходится игнорировать свойства, действительные в сетке при использовании кладки. Например, grid-template-areas , где большая часть значений проходит, поскольку он определяет двухмерную компоновку сетки, в каменной кладке мы полностью определяем только одно направление.
Оставьте свой отзыв
Взгляните на эти примеры, а также на черновой вариант спецификации, в котором каждая версия располагается рядом с другой. Дайте нам знать, что вы думаете, комментируя выпуск 9041 , или, если вы предпочитаете написать сообщение в своем блоге или в социальных сетях, обязательно сообщите нам об этом в X или LinkedIn .