使用css Grid可通过grid-template-columns与minmax()结合实现类瀑布流布局。1. 采用repeat(auto-fit, minmax())设置弹性列宽，使列数随容器自适应；2. 利用grid-auto-rows定义行高范围，配合grid-auto-flow:dense填充空隙，提升布局紧凑性；3. 注意兼容性问题，masonry值尚处实验阶段，推荐稳定方案并辅以javaScript库应对复杂场景。
实现瀑布流布局，CSS 的 Grid 布局可以配合 grid-template-rows 和 grid-auto-flow: dense 来模拟视觉上的“瀑布”效果。虽然 CSS Grid 本身不直接支持像 javascript 那样的动态高度堆叠（如 Masonry），但通过合理设置行高和自动排列，能实现近似效果。
1. 使用 grid-template-rows + minmax()
通过定义网格行的最小高度范围，让每项内容根据自身高度自动撑开，形成错落感。
.container { display: grid; grid-template-columns: repeat(3, 1fr); /* 三列 */ grid-template-rows: masonry; /* 实验性语法，目前支持有限 */ gap: 16px; } .item { break-inside: avoid; /* 避免内容被截断 */ }
⚠️ 注意：grid-template-rows: masonry 是新的实验性语法，目前仅在部分浏览器（如 firefox）中支持。更稳定的方式是使用 minmax() 搭配自动行生成。
2. 稳定方案：minmax() + auto-fit
利用 minmax() 定义列行为弹性，并结合自动换行生成多行。
立即学习“前端免费学习笔记（深入）”；
.container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; } .item { /* 每个项高度不同 */ height: fit-content; /* 或固定不同高度 */ }
这样列数会根据容器宽度自适应，每项高度由内容决定，视觉上呈现类似瀑布流的错落排列。
3. 利用 grid-auto-rows 和 dense 填充空隙
当某些项目较短时，可用 grid-auto-flow: dense 让后续小项目填补空白，提升紧凑度。
.container { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(100px, auto); /* 自动行高 */ gap: 16px; } .item:nth-child(odd) { grid-row-end: span 2; /* 高度可变 */ } .container { grid-auto-flow: dense; /* 启用密集填充 */ }
这个方法适合项目高度已知或可预设的情况，dense 模式能让布局更紧凑，避免大块留白。
4. 实际建议与注意事项
- CSS 原生“瀑布流”仍在演进，masonry 值是未来方向，但现在兼容性有限。
- 推荐使用 repeat(auto-fit, minmax()) 实现响应式列数，配合内容自适应高度。
- 若需精确控制，尤其是大量动态内容，仍建议结合 JavaScript 库（如 Masonry、Masonry-layout）。
- 确保容器有足够宽度变化空间，在移动端测试布局表现。
基本上就这些。用 CSS Grid 实现类瀑布流布局，关键在于列的弹性和行高的灵活性，虽然不能完全替代 js 方案，但在许多场景下已经足够实用。