纯 css grid 无法实现真正瀑布流，但可通过 grid-template-columns + grid-auto-flow: dense 模拟视觉错落效果；dense 关键在于回填空隙而非动态按列高分配，需配合 auto-fill、minmax() 和 minmax(100px, auto) 行高以兼顾兼容性与布局合理性。
纯 CSS Grid 无法实现真正按列高动态分配的瀑布流，但可以用 grid-template-columns + grid-auto-flow: dense 模拟出视觉上接近的效果，且兼容性好、无需 JS。
为什么 grid-auto-flow: dense 是关键开关
默认的 grid-auto-flow: row 会让卡片从左到右、从上到下顺序填满网格行，结果是“横排堆叠”，看不出瀑布感。启用 grid-auto-flow: dense 后，浏览器会主动把后续较矮的卡片塞进前面高卡片留下的空隙里，形成错落排列。
- 它不改变 DOM 顺序，只调整渲染位置——这点必须清楚，否则键盘 tab 或屏幕阅读器会跳序
- 如果卡片内有表单、链接或需要语义顺序的内容，
dense可能导致可访问性问题 - 别和
grid-row-end混用：手动设span值会覆盖dense的自动填充逻辑
minmax() 中 auto-fill 和 auto-fit 的区别必须分清
repeat(auto-fill, minmax(250px, 1fr)) 和 repeat(auto-fit, minmax(250px, 1fr)) 看似一样，实际行为差异极大：
-
auto-fill会预留所有可能列的槽位，哪怕某列暂时为空——这是瀑布流“后续高卡片能掉进合适列”的前提 -
auto-fit会收缩空列，导致初始加载时只显示 1 列，滚动后才突然多出几列，体验割裂 - 小屏下若没配
@media调整minmax()最小宽度（比如降到160px），列宽会被强行压缩，卡片内容挤成一团
grid-auto-rows 不能写成固定值或单纯 auto
grid-auto-rows: 200px 会让矮卡片底部留白、高卡片被裁剪；grid-auto-rows: auto 在部分旧版 Chromium 中失效；正确写法是：
grid-auto-rows: minmax(100px, auto)
-
100px是最小行高兜底，防极矮卡片塌陷 -
auto允许内容撑开高度，避免图片被截或文字换行异常 - 别用
fit-content—— 它在grid-auto-rows里不生效
图片底部多出 4px 空白？不是 Grid 的锅
这是 <img> 默认为 inline 元素、基线对齐（vertical-align: baseline）导致的。修复方式只有两个可靠方案：
- 给图片加
display: block - 或统一设父容器
font-size: 0，再在卡片内重置字体大小 - 千万别用
margin-bottom: -4px修补——不同字号、不同字体下这个像素值会变，维护成本高
真正按列高均衡分配的瀑布流仍需 JS 计算，CSS 目前只能靠 dense + auto-fill + minmax() 组合逼近效果。最容易被忽略的是：dense 的可访问性代价、auto-fill 的占位逻辑、以及图片基线对齐这个“老问题”在 Grid 里依然存在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
