使用CSS Grid模拟瀑布流可通过grid-template-columns分多列，结合grid-auto-rows和grid-row-end控制行跨度，配合JS动态计算高度实现兼容性好的布局效果。
实现瀑布流布局，使用 CSS Grid 是一种简洁高效的方式。虽然传统瀑布流常借助 JavaScript 或第三方库（如 Masonry），但现代 CSS Grid 配合 grid-template-rows: masonry 可以原生支持，不过目前浏览器支持有限。现阶段更稳定且广泛兼容的方法是通过 Grid 的列布局模拟瀑布流效果。
使用 CSS Grid 模拟瀑布流（兼容性好）
核心思路是将容器划分为多列，让子项自动在各列中按高度堆叠，形成错落有致的视觉效果。
关键步骤：
- 设置父容器为 display: grid
- 使用 grid-template-columns 定义多列（如 3 列）
- 设置 grid-auto-rows 为一个较小的基准行高（如 1px）
- 启用 grid-auto-flow: dense 让空隙被填充
- 每个子项通过 grid-row-end 占据与其内容高度成比例的行数
示例代码：
立即学习“前端免费学习笔记（深入）”；
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 1px;
gap: 10px;
grid-auto-flow: dense;
}
<p>.item {
grid-row-end: span 10; /<em> 假设高度对应 10 行 </em>/
}</p><p>.item.tall {
grid-row-end: span 20; /<em> 更高的项目占更多行 </em>/
}</p>说明：通过 JS 动态计算每个项目的高度，并设置对应的 grid-row-end: span N，可以实现真正自适应的瀑布流。
使用 masonry 布局（实验性）
CSS 新增了对 masonry 布局的支持，语法更直观，但目前仅部分浏览器（如 Firefox Nightly）支持。
示例：
.container {
display: grid;
grid-template-rows: masonry;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
只需这一段 CSS，子元素会自动在列中垂直堆叠，无需手动计算行数。但因兼容性问题，生产环境暂不推荐。
配合 JavaScript 实现动态瀑布流
为了兼容性和灵活性，通常结合 JS 计算每列当前高度，将下一项插入最短列。
基本逻辑：
- 初始化每列高度数组
- 遍历每个子项，找到最短列
- 将该项定位到该列，更新列高
- 使用 position: absolute 或 CSS Transform 定位
虽然这不是纯 CSS 方案，但能完美控制布局，适合图片墙等场景。
基本上就这些。用 Grid 模拟瀑布流，关键是利用 grid-auto-rows + grid-row-end 控制占据行数，再配合 JS 动态赋值，就能实现流畅的视觉效果。masonry 模式未来可期，但现在还需耐心等待。
