Макетирование с эффектом стенок

Экспериментальная: Это экспериментальная технология
Перед использованием в производстве внимательно изучите таблицу совместимости с браузерами.

Уровень 3 спецификации CSS макета сетки включает значение masonry для grid-template-columns и grid-template-rows. Это руководство описывает, что такое макетирование с эффектом стенок и как его использовать.

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

Создание макета с эффектом стенок

Чтобы создать наиболее распространённый макет с эффектом стенок, столбцы будут осью сетки, а строки — осью макетирования с эффектом стенок, определённые с помощью grid-template-columns и grid-template-rows. Элементы-потомки этого контейнера теперь будут выводиться по одному элементу вдоль строк, как и в случае с обычным автоматическим размещением макета сетки.

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

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

<div class="grid">
  <div class="item" style="block-size: 2em;"></div>
  <div class="item" style="block-size: 3em;"></div>
  <div class="item" style="block-size: 1.6em;"></div>
  <div class="item" style="block-size: 4em;"></div>
  <div class="item" style="block-size: 2.2em;"></div>
  <div class="item" style="block-size: 3em;"></div>
  <div class="item" style="block-size: 4.5em;"></div>
  <div class="item" style="block-size: 1em;"></div>
  <div class="item" style="block-size: 3.5em;"></div>
  <div class="item" style="block-size: 2.8em;"></div>
</div>

Также можно создать макет с эффектом стенок, загружая элементы в строки.

.grid {
  display: grid;
  gap: 10px;
  grid-template-columns: masonry;
  grid-template-rows: repeat(3, 100px);
}

Управление осью сетки

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

Макет с эффектом стенок с элементами, занимающими несколько дорожек

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

<div class="grid">
  <div class="item" style="block-size: 2em;"></div>
  <div class="item" style="block-size: 3em; grid-column-end: span 2;"></div>
  <div class="item" style="block-size: 1.6em;"></div>
  <div class="item" style="block-size: 4em;"></div>
  <div class="item" style="block-size: 2.2em; grid-column-end: span 2"></div>
  <div class="item" style="block-size: 3em;"></div>
  <div class="item" style="block-size: 4.5em;"></div>
  <div class="item" style="block-size: 1em;"></div>
  <div class="item" style="block-size: 3.5em;"></div>
  <div class="item" style="block-size: 2.8em;"></div>
</div>

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

Этот пример включает элемент с позиционированием для столбцов. Элементы с определённым размещением размещаются до применения макета с эффектом стенок.

<div class="grid">
  <div class="item" style="block-size: 2em;"></div>
  <div class="item" style="block-size: 3em;"></div>
  <div class="item" style="block-size: 1.6em;"></div>
  <div class="item" style="block-size: 4em;"></div>
  <div class="item positioned" style="block-size: 3.2em;">positioned.</div>
  <div class="item" style="block-size: 3em;"></div>
  <div class="item" style="block-size: 4.5em;"></div>
  <div class="item" style="block-size: 1em;"></div>
  <div class="item" style="block-size: 3.5em;"></div>
  <div class="item" style="block-size: 2.8em;"></div>
</div>

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

.positioned {
  padding: 1em;
  grid-column: 2 / 4;
}

Поддержка в случае отсутствия макета с эффектом стенок

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

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`Masonry_layout`	Нет	Нет	77	Нет	предварительный просмотр	Нет	Нет	Нет	Нет	Нет	Нет

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`Masonry_layout`	Нет	Нет	77	Нет	предварительный просмотр	Нет	Нет	Нет	Нет	Нет	Нет

css.properties.grid-template-columns.masonry

Таблицы BCD загружаются только в браузере

css.properties.grid-template-rows.masonry

Таблицы BCD загружаются только в браузере

См. также

grid-auto-flow для управления автоматическим размещением сетки
Родной CSS макет с эффектом стенок в CSS сетке

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Masonry_layout