瀑布流佈局

實驗性： 這是一項實驗性技術
在生產中使用此技術之前，請仔細檢查瀏覽器相容性表格。

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