纯 css grid 无法实现真正的电商级瀑布流，需结合 grid-auto-flow: column 与 js 动态分配；关键在于稳住高度计算、图片加载、小屏列数适配和可访问性。
纯 CSS Grid 无法实现真正的电商级瀑布流，但能用 grid-auto-flow: column + JS 动态分配逼近效果；关键不是“能不能写出来”，而是“能不能稳住高度计算、图片加载、小屏列数和可访问性”。
为什么不能直接用 grid-template-columns: repeat(2, 1fr)
这只能做出两列等高网格，不是瀑布流。商品卡片高度差异大（图文混排、短标题 vs 长描述），强行两列会留下大片顶部空隙，视觉松散且浪费空间。真正瀑布流要求“每列独立生长”，浏览器得知道哪一列当前最短——Grid 本身不提供这个能力，必须靠 JS 补足。
-
repeat(2, 1fr)是静态列定义，Grid 按行顺序填满，高卡片会卡住后续所有项 - 想让第 5 个商品插进第 1 列底部空隙？必须启用
grid-auto-flow: column，再由 JS 控制插入位置 - 但 Safari iOS 16.4 之前对
grid-auto-flow: column支持不全，会出现错位或重叠
移动端必须用 auto-fill，且最小宽度要降级
minmax(240px, 1fr) 在 iPhone 竖屏（375px）下会硬撑出一列（240px 占满），第二列只剩 135px，图片被压扁、文字换行错乱。这不是 Grid 的错，是 minmax 下限没适配小屏。
- 必须加媒体查询：
@media (max-width: 768px) { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } - 160px 是实测底线：再小，图标+价格标签就挤成一条线；再大，小屏只出一列，用户滑半天才见第二张图
- 绝对不要用
auto-fit—— 它收缩空列，导致刚加载时只显示 1 列，滚动后突然跳成 2 列，视觉断层明显
grid-auto-rows 写成 minmax(100px, auto) 而非 100px 或 auto
写成 100px 会让矮卡片（比如仅含图标+价格的促销标）被拉高、留白；写成单独 auto 则旧版 Chromium（Chrome 90 前）直接忽略，行高塌陷为 0，卡片叠在一起。
-
minmax(100px, auto)是唯一稳妥解：兜底防塌陷，又允许内容自然撑开 - 别碰
fit-content—— CSS 规范明确不支持它在 Grid 行方向生效 - 这个值不是魔法数字，可按业务调低到 80px，但低于 60px 会导致小图标卡片视觉消失
图片底部多出 4px 空白？不是 Grid 的锅，是 <img> 默认行为
这是 <img> 默认 vertical-align: baseline 导致的基线对齐问题，和 Grid 无关。哪怕你把 Grid 所有属性删光，空白还在。
- 硬要求：给图片加
display: block或vertical-align: top - 顺手补上
width: 100%; height: auto;，否则宽高比失控，aspect-ratio失效 - 禁用
margin-bottom: -4px—— 字体一换，这个像素值就错；也别用line-height: 0，它会污染同容器内其他文本
真正难的从来不是写出那几行 CSS，而是图片加载异步、字体加载异步、用户缩放、SSR 首屏直出这些叠加状态下的高度重算逻辑——它们不会报错，但会让瀑布流在某个机型上突然塌成一列。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
