CSS 网格布局规范的第三级为grid-template-columns和grid-template-rows属性引入了masonry值。本指南详细介绍了瀑布流布局的概念及其使用方法。

瀑布流布局是一种布局方式，其中一个轴采用典型的严格网格布局，通常是列轴，而另一个轴则采用瀑布流布局。在瀑布流轴上，后续行的元素会向上填充，以填补较短元素下方的空白，而不是像严格网格布局那样留下空白。

创建瀑布流布局

要创建最常见的瀑布流布局，可以将列定义为网格轴，行定义为瀑布流轴，通过grid-template-columns和grid-template-rows属性来设置。此容器的子元素将像普通网格布局的自动放置那样，逐行排列。

当元素换到新的行时，它们将按照瀑布流算法进行显示。元素会优先填充空间最大的列，从而形成一个紧凑的布局，而无需严格的行轨道。

<template>
  <div class="wrapper">
    <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>
</template>

<style scoped>
.wrapper {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  grid-template-rows: masonry;
}
.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  color: #d9480f;
}
</style>

也可以创建一种让元素按行加载的瀑布流布局。

<template>
  <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>
</template>

<style scoped>
* {
  box-sizing: border-box;
}
div {
  display: block;
  unicode-bidi: isolate;
}
.grid {
  display: grid;
  gap: 10px;
  grid-template-columns: masonry;
  grid-template-rows: repeat(3, 100px);
  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;
}
</style>

控制网格轴

在网格轴上，一切的表现会和你在网格布局中预期的一样。你可以使用span 关键字，让元素在自动布局的同时跨多个轨道。元素也可以使用基于网格线的定位方式来进行定位。

包含跨轨道元素的瀑布流布局

在这个示例中，有两个元素跨了两个轨道，而瀑布流元素会围绕着它们进行布局。

<template>
  <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>
</template>

<style scoped>
.grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  grid-template-rows: masonry;
}
.grid {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.grid > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  color: #d9480f;
}
</style>

这个示例包含一个对列进行了定位的项目。具有明确位置的项目会在瀑布流布局之前进行放置。

<template>
<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>

</template>

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

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

.grid > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  color: #d9480f;
}
</style>

瀑布流布局的降级方案

在不支持瀑布流布局的浏览器中，将使用常规的网格自动布局方式。

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24