瀑布流布局是指页面元素按照宽度固定、高度不固定的方式排列，第一行排满后，后续元素会填充到前面高度最短的列下方，整体呈现错落有致的视觉效果，常用于图片展示、内容卡片等场景。使用CSS grid布局实现这种效果，不需要额外的JavaScript计算，仅通过CSS属性就能完成。
核心实现思路
grid布局实现瀑布流的核心是利用grid-template-columns定义固定列数，通过grid-auto-rows设置每一行的基准高度，再让每个子元素根据自身的高度自动跨越多行，从而模拟出瀑布流的错位效果。关键是需要提前知道每个子元素的大致高度比例，或者通过grid-row: span 数值的方式手动指定元素跨越的行数。
基础实现步骤
1. 定义容器grid属性
首先给瀑布流的外层容器设置grid布局相关属性，指定列数和行基准高度：
/* 瀑布流容器样式 */
.waterfall-container {
display: grid;
/* 定义3列，每列宽度相等，占满剩余空间 */
grid-template-columns: repeat(3, 1fr);
/* 定义每一行的基准高度为100px */
grid-auto-rows: 100px;
/* 列之间的间距 */
gap: 16px;
/* 容器内边距 */
padding: 16px;
}
2. 设置子元素跨越行数
每个子元素需要根据自身内容的高度，设置grid-row: span来指定跨越的基准行数，比如高度为200px的元素可以设置跨越2行，高度为300px的元素可以设置跨越3行：
/* 子元素基础样式 */
.waterfall-item {
border-radius: 8px;
background-color: #f0f0f0;
/* 内容居中显示 */
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: #333;
}
/* 高度为200px的元素，跨越2行 */
.item-height-2 {
grid-row: span 2;
}
/* 高度为300px的元素，跨越3行 */
.item-height-3 {
grid-row: span 3;
}
/* 高度为150px的元素，跨越1.5行，这里用2行近似处理 */
.item-height-1-5 {
grid-row: span 2;
}
3. HTML结构编写
按照上述样式定义，编写对应的HTML结构，给不同高度的子元素添加对应的类名：
<div class="waterfall-container">
<div class="waterfall-item item-height-2">卡片1 高度200px</div>
<div class="waterfall-item item-height-3">卡片2 高度300px</div>
<div class="waterfall-item item-height-1-5">卡片3 高度150px</div>
<div class="waterfall-item item-height-2">卡片4 高度200px</div>
<div class="waterfall-item item-height-3">卡片5 高度300px</div>
<div class="waterfall-item item-height-2">卡片6 高度200px</div>
<div class="waterfall-item item-height-1-5">卡片7 高度150px</div>
<div class="waterfall-item item-height-3">卡片8 高度300px</div>
</div>
自适应列数优化
如果需要实现响应式效果，根据屏幕宽度自动调整列数，可以使用repeat(auto-fill, minmax(最小宽度, 1fr))来定义grid-template-columns，这样浏览器会自动计算每行能放多少个最小宽度的列：
.waterfall-container {
display: grid;
/* 自动填充列，每列最小宽度200px，最大1fr */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-auto-rows: 100px;
gap: 16px;
padding: 16px;
}
常见问题说明
- 如果元素高度计算不准确，可能会出现布局错乱，建议提前明确每个子元素的高度，或者通过JS动态计算后设置对应的span值。
- grid-auto-rows设置的是基准行高，实际元素的高度会根据span的数值乘以基准行高再加gap的间距，需要预留好间距的计算空间。
- 如果需要元素内部内容自适应高度，可以去掉固定的span类，改用JS获取每个元素的高度后动态设置
grid-row: span Math.ceil(元素高度 / 基准行高)。
完整示例代码
以下是包含响应式效果的完整可运行代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid瀑布流布局示例</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
padding: 20px;
font-family: Arial, sans-serif;
}
.waterfall-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-auto-rows: 100px;
gap: 16px;
}
.waterfall-item {
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: #fff;
}
.item-1 {
background-color: #409eff;
grid-row: span 2;
}
.item-2 {
background-color: #67c23a;
grid-row: span 3;
}
.item-3 {
background-color: #e6a23c;
grid-row: span 2;
}
.item-4 {
background-color: #f56c6c;
grid-row: span 1;
}
</style>
</head>
<body>
<div class="waterfall-container">
<div class="waterfall-item item-1">卡片1</div>
<div class="waterfall-item item-2">卡片2</div>
<div class="waterfall-item item-3">卡片3</div>
<div class="waterfall-item item-4">卡片4</div>
<div class="waterfall-item item-1">卡片5</div>
<div class="waterfall-item item-3">卡片6</div>
<div class="waterfall-item item-2">卡片7</div>
<div class="waterfall-item item-4">卡片8</div>
<div class="waterfall-item item-1">卡片9</div>
</div>
</body>
</html>