CSS Grid 瀑布流核心是 grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)))，配合 grid-auto-rows: minmax(100px, auto)、图片 width: 100%; display: block; 及 gap 控制间距，避免 column-count 的流式局限与截断问题。
Grid 的 grid-template-columns 配合 minmax() 是核心
瀑布流在 CSS 中不等于“每列等宽+高度自适应”的传统理解——真正可控、响应式且无需 JS 的方案，靠的是 grid-template-columns: repeat(auto-fill, minmax(240px, 1fr))) 这一组合。它让浏览器根据容器宽度自动计算能放几列，每列最小 240px、最大均分剩余空间，避免出现过窄列。
常见错误是写成 auto-fit 却没意识到：当有空列时，auto-fit 会把空列收缩掉，而 auto-fill 保留占位，更适合图片高度差异大、需要严格列数对齐的瀑布流场景。
-
minmax(240px, 1fr)中的1fr不代表“填满”，而是参与弹性分配；若所有列都取到1fr，实际宽度由总容器除以列数决定 - 别用
grid-auto-rows: 100px强制行高——图片高度各异，应设为grid-auto-rows: minmax(100px, auto)，给内容留出伸展空间 - 移动端下，
240px可能太宽，建议配合@media调整为minmax(160px, 1fr)
图片必须设 width: 100% 且取消默认垂直间距
Grid 容器只管列数和行高分配，但图片自身若保留原始尺寸或内联元素默认行为（如 vertical-align: baseline），就会在底部留下空白，导致错位、间隙不均甚至列高塌陷。
典型现象是：明明 Grid 列数正确，但某张图下方多出 4–5px 空白，整列被拉长，后续图片开始偏移。
- 所有图片加
width: 100%; height: auto;，确保宽度撑满格子、高度按比例缩放 - 父容器或图片本身加
display: block;，消除 inline 元素默认基线对齐带来的底部间隙 - 避免对图片设
margin或padding，如需间距，统一用gap: 8px控制 Grid 项之间的空隙
为什么不用 column-count？兼容性与控制粒度问题
column-count 看似更“瀑布”，但它把内容当成连续文本流切割，图片顺序是文档流顺序（从上到下、列满换列），而非 Grid 的行列二维定位。这意味着：第一列可能堆了 5 张图，第二列才开始，视觉上仍是“左重右轻”，不是均匀瀑布。
更重要的是，column-count 无法单独控制某张图的高度、无法响应式调整列宽、不支持 gap 精确留白，且 Safari 对 break-inside: avoid 支持不稳定，容易出现图片被截断。
- 如果真要用多列布局，至少加上
column-gap: 8px和每张图的break-inside: avoid - 但一旦涉及 hover 动画、懒加载占位、或图片宽高比差异极大（如 16:9 与 1:1 混排），
column-count几乎必然错乱 - Grid 方案在 Chrome/Firefox/Safari 16.4+ 均稳定支持，无需前缀
真实项目中容易漏掉的三个细节
写完基本 Grid 规则后，往往在上线前才发现布局突然错位——多数不是语法错，而是这几个隐性约束没处理：
- 外层容器必须有明确宽度（比如
max-width: 1200px或width: 100%），否则auto-fill无法计算可容纳列数 - 图片父元素（即 Grid item）不能设
flex或inline相关 display，必须保持display: grid | block | contents等兼容状态 - 若用
object-fit: cover裁剪图片，记得同步设height: 100%，否则 Grid 行高仍按原始图片高度计算，造成裁剪区域外溢
Grid 瀑布流真正的复杂点不在写法，而在“所有图片必须可预测地占据整格”——这意味着你要控制的不只是 CSS，还有图片加载时机、宽高比一致性、以及是否允许用户缩放页面。这些才是线上出问题的高频原因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
