瀑布流布局指的是页面元素按列排布、每列高度自适应的一种排版方式，常见于图片社区、商品列表等内容高度不一致的场景。提到瀑布流，很多人的第一反应是用JavaScript计算每个item的位置，其实纯CSS就已经能实现相当不错的效果，而且性能更好、代码量更少。本文介绍几种主流的纯CSS实现方案，并分析它们各自的适用场景。
一、使用columns多栏布局实现瀑布流
columns本来是用于报纸杂志式多栏排版的属性，但它天然具备垂直填充的特点：内容会先填满第一列，再流向第二列，这正好符合瀑布流的排列逻辑。用columns实现瀑布流是代码量最少的方案，核心就两个属性：column-count控制列数，column-gap控制列间距。
<div class="masonry">
<div class="item">内容块1</div>
<div class="item">内容块2</div>
<div class="item">内容块3</div>
<div class="item">内容块4</div>
</div>
<style>
.masonry {
column-count: 3; /* 分成3列 */
column-gap: 16px; /* 列与列之间的间距 */
}
.item {
break-inside: avoid; /* 防止一个元素被拆分到两列 */
margin-bottom: 16px; /* 元素之间的纵向间距 */
}
</style>这里有一个关键细节：break-inside: avoid必须加上。因为columns的设计初衷是排版文字，当一个元素高度较大时，默认会被切开放到下一列去，加上这个属性后每个item就是完整的一块，不会被拦腰截断。这一点是新手最容易踩的坑。
columns方案的优点很明显：代码极简，浏览器自动分配内容，完全不需要写JS。但它也有个无法忽视的缺陷——内容排列顺序是先竖后横的。也就是说，第一个元素排在第一列顶部，第二个元素排在第一列第二个位置，而不是第二列顶部。如果你的业务对顺序敏感（比如按时间线展示的动态信息流），这种排列会让用户感觉顺序错乱，那就需要慎用。
二、使用grid网格布局实现瀑布流
grid布局配合grid-auto-flow和密集填充模式，也能实现瀑布流效果。它的思路是把容器划分为多列，然后让每个元素按行流向最紧凑的位置。这种方案的排列顺序是先横后竖的，更符合用户从左到右的阅读习惯。
<div class="masonry">
<div class="item">内容块1</div>
<div class="item">内容块2</div>
<div class="item">内容块3</div>
<div class="item">内容块4</div>
</div>
<style>
.masonry {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3列等宽 */
gap: 16px; /* 行列间距统一控制 */
}
.item:nth-child(1) { grid-row: span 30; }
.item:nth-child(2) { grid-row: span 45; }
.item:nth-child(3) { grid-row: span 25; }
.item:nth-child(4) { grid-row: span 50; }
</style>注意上面的grid-row: span写法，它表示这个元素占多少个隐式行。因为瀑布流里每个元素高度不同，需要手动指定跨越的行数，浏览器才知道怎么把它们排得紧凑。这带来一个问题：你必须知道每个元素的大致高度才能写出正确的span值。
这种方案的排列顺序是从左到右、再换行，视觉顺序更自然。但span需要提前知道，如果内容是动态的（图片加载前高度未知），纯CSS就无能为力了，得借助JS在图片加载完成后计算并设置行数。所以grid方案适合内容高度可预估的场景，比如运营配置的卡片，每个卡片的高度档位是固定的几种。
另外grid方案支持响应式时更灵活，配合repeat(auto-fill, minmax(220px, 1fr))可以让列数根据容器宽度自动变化，不需要写媒体查询，这一点比columns更优雅。
三、为什么不推荐用flex做瀑布流
经常有人尝试用flex布局实现瀑布流，思路是外层容器横向排列若干个纵向容器，每个纵向容器里再放一列item。这种写法确实能做出视觉上的瀑布流，代码也不复杂：
<div class="masonry">
<div class="column">
<div class="item">1</div>
<div class="item">3</div>
</div>
<div class="column">
<div class="item">2</div>
<div class="item">4</div>
</div>
</div>
<style>
.masonry {
display: flex;
gap: 16px;
}
.column {
flex: 1;
display: flex;
flex-direction: column;
gap: 16px;
}
</style>但这种结构有个根本性问题：item需要手动分配到各个column里。如果数据是动态的，你就得写JS把新数据塞进高度最矮的那一列，本质上还是JS方案，flex只是提供了骨架。而且动态插入时顺序会完全按照列来组织，从接口拿到的数据顺序和渲染出来的视觉顺序对不上，做分页加载、定位某个具体item时会很麻烦。
所以flex方案只适合静态内容，比如纯展示的营销页面，元素写死在HTML里。一旦涉及数据驱动渲染，就不如columns和grid省心。
四、三种方案的选型建议
综合来看，三种方案各有取舍，可以根据下表快速判断该用哪种：
| 方案 | 代码量 | 排列顺序 | 动态内容支持 | 适用场景 |
|---|---|---|---|---|
| columns | 最少 | 先竖后横 | 较好 | 顺序不敏感的图片墙 |
| grid + span | 中等 | 先横后竖 | 需JS辅助 | 高度可预估的卡片 |
| flex分列 | 中等 | 按列组织 | 差 | 静态展示页面 |
如果做的是图片瀑布流且对顺序要求不高，columns是首选，两行CSS就能上线；如果是顺序敏感的信息流，或者需要精确控制每个卡片的位置，建议用grid配合少量JS计算行跨度；纯静态页面则flex分列完全够用。
最后补充一点，CSS规范中的原生瀑布流属性grid-template-rows: masonry正在推进中，部分浏览器已经可以通过实验特性开启。等它正式落地后，瀑布流会变成一行代码的事。在那之前，上面几种方案足以覆盖绝大多数业务需求。
css瀑布流布局columns多栏布局grid网格布局修改时间：2026-09-15 15:54:43