答案：通过grid-auto-rows与grid-row-end配合，结合auto-fill和minmax实现响应式瀑布流布局，利用小行高划分轨道，项目跨越多行形成错落，适合规则内容展示。
在CSS Grid中实现瀑布流布局，关键在于利用grid-auto-rows和grid-template-columns的自动填充特性，结合grid-gap来创建视觉上错落有致的效果。虽然Grid本身不像Masonry那样原生支持瀑布流，但通过合理设置可以模拟出类似效果。
使用 grid-auto-rows 控制行高
瀑布流的核心是每项内容高度不同，形成自然错落。通过设定grid-auto-rows为一个较小的基础值，让Grid自动创建足够多的行轨道，再配合grid-row-end延伸项目高度。
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-auto-rows: 10px; /* 基础行高，越小越精细 */
grid-gap: 10px;
}
<p>.item {
grid-row-end: span 5; /<em> 默认占5行（50px） </em>/
}
.item.tall {
grid-row-end: span 10; /<em> 高内容占10行（100px） </em>/
}
这样每个项目可以根据内容动态决定占据多少行，形成高低不一的排列。
利用 auto-fill 和 minmax 实现响应式列数
repeat(auto-fill, minmax(250px, 1fr)) 是实现自适应列的关键：
立即学习“前端免费学习笔记（深入）”；
- auto-fill：尽可能多地填充列，即使某些列为空
- minmax(250px, 1fr)：每列最小250px，最大为等分剩余空间
当容器宽度变化时，列数会自动增减，保持布局紧凑。
配合 JavaScript 动态设置行跨度（可选增强）
若内容高度差异大，可借助JS计算实际高度并动态添加类名控制grid-row-end跨度，使布局更贴合内容。
- 遍历每个.item，获取其实际渲染高度
- 根据高度区间添加如
span-5、span-8等类名 - CSS中预定义这些类对应的
grid-row-end: span X
注意事项与局限性
CSS Grid的瀑布流并非真正意义上的“垂直堆叠”，而是基于行轨道的布局。因此：
- 需合理设置
grid-auto-rows精度，太大会导致空白过多 - 不支持跨行自动避让（像Masonry那样），可能出现顶部空洞
- 适合高度相对规律的内容，极端不规则建议用JavaScript库
基本上就这些。用Grid实现瀑布流简洁高效，尤其适合图片墙、卡片列表等场景，无需额外脚本也能获得良好视觉效果。关键是理解grid-auto-rows与grid-row-end的配合逻辑。
