瀑布流布局

实验性： 这是一项实验性技术
在生产中使用此技术之前，请仔细检查浏览器兼容性表格。

CSS 网格布局规范的第三级包含了 masonry 值，用于 grid-template-columns 和 grid-template-rows。本指南详细介绍了瀑布流布局是什么以及如何使用它。

瀑布流布局是一种布局方法，其中一个轴使用典型的严格网格布局（通常是列），另一个轴使用瀑布流布局。在瀑布流轴上，项目不会严格地按照网格布局排列，留下较短项目后面的空隙，而是下一行的项目会向上填充这些空隙。

创建瀑布流布局

要创建最常见的瀑布流布局，您的列将是网格轴，行将是瀑布流轴，分别用 grid-template-columns 和 grid-template-rows 定义。此容器的子元素将像常规网格布局自动放置一样，逐项沿着行排列。

当项目移动到新行时，它们将按照瀑布流算法显示。项目将加载到空间最大的列中，从而形成紧密排列的布局，而没有严格的行轨道。

* {
  box-sizing: border-box;
}

body {
  font: 1.2em sans-serif;
}

.grid {
  padding: 10px;
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.item {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  color: #d9480f;
}

css

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

html

<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

// prettier-ignore
const itemSizes = [
  "2em", "3em", "1.6em", "4em", "3.2em",
  "3em", "4.5em", "1em", "3.5em", "2.8em",
];
const items = document.querySelectorAll(".item");
for (let i = 0; i < items.length; i++) {
  items[i].style.blockSize = itemSizes[i];
}

也可以创建项目加载到行中的瀑布流布局。

// prettier-ignore
const itemSizes = [
  "2em", "3em", "1.6em", "4em", "2.2em",
  "3em", "4.5em", "1em", "3.5em", "2.8em",
];
const items = document.querySelectorAll(".item");
for (let i = 0; i < items.length; i++) {
  items[i].style.inlineSize = itemSizes[i];
}

css

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

控制网格轴

在网格轴上，事情将像您在网格布局中预期的那样工作。您可以使用 span 关键字使项目跨越多个轨道，同时保持自动放置。项目也可以使用基于线的定位进行定位。

带有跨越项目的瀑布流布局

在此示例中，其中两个项目跨越两个轨道，瀑布流项目围绕它们排列。

html

<div class="grid">
  <div class="item"></div>
  <div class="item span-2"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item span-2"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

css

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

.span-2 {
  grid-column-end: span 2;
}

此示例包含一个具有列定位的项目。具有明确放置的项目在瀑布流布局发生之前放置。

html

<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item positioned">positioned.</div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

css

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