必须用 auto-fill 而非 auto-fit，因 auto-fill 预留列槽位确保瀑布流动态填充不抖动；grid-auto-rows 必须为 minmax(100px, auto)，移动端同步下调至 80px；图片父容器需设 display: block 避免基线空白；禁用 grid-auto-flow: dense 保障键盘导航顺序与 dom 一致。
直接用 grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) + grid-auto-rows: minmax(100px, auto) 就能跑起来，但必须选对 auto-fill，否则小屏只出一列、加载时列数跳变——这是电商瀑布流最常翻车的点。
为什么必须用 auto-fill 而不是 auto-fit
auto-fit 会在空列上收缩空白，导致浏览器实际渲染列数少于预期；auto-fill 则保留所有可能列的占位，哪怕某列暂时没内容。瀑布流依赖这个“预留槽”来把后续高卡片塞进合适列，否则会出现：刚加载前 3 张图只显示 1 列，滚动后突然弹出第 2、3 列——用户会感知为布局抖动，电商场景下直接影响点击转化。
- 现象验证：在 DevTools 中临时把
auto-fill改成auto-fit，清空列表再快速添加 2–3 个 item，就能复现列数突变 - 兼容性注意：Safari 16.4+ 和 Chrome 105+ 都已稳定支持
auto-fill，无需降级 fallback - 别被“fit 更智能”误导——它聪明过头了，对瀑布流是负优化
grid-auto-rows 必须写成 minmax(100px, auto)
写成固定值（如 200px）会导致图片被裁剪、文字换行错乱；写成 auto 单独出现，在旧版 Chromium（如 Electron 22 内核）里会被忽略；fit-content 在 Grid 行高中根本不生效。
-
minmax(100px, auto)是唯一稳妥解：100px 防止极矮卡片塌陷（比如纯标题无图），auto允许内容自然撑开高度 - 移动端需同步下调最小值：在
@media (max-width: 768px)中把100px改为80px，否则小屏下因列宽压缩，卡片高度被强行压扁，商品图严重变形 - 别试图用
align-items: start补救——它只影响对齐，不解决行高塌陷根源
图片错位、底部多出 4px 空白？不是 Grid 的问题
这是 <img> 默认 vertical-align: baseline 导致的基线对齐副作用，和 Grid 容器无关。用 margin-bottom: -4px 或 line-height: 0 属于掩耳盗铃，不同字体/字号下像素值会漂移。
- 硬性要求：所有图片父容器加
display: block，或图片自身加vertical-align: top - 更推荐前者：
.item img { display: block; }，简洁且不影响其他文本流 - 如果卡片内还有文字描述，确保
.item不设font-size: 0类 hack——那会破坏可访问性，屏幕阅读器可能跳过文字
别开 grid-auto-flow: dense，除非你放弃键盘导航
dense 会让卡片填满空隙，视觉更紧凑，但会打乱 DOM 顺序。电商页面里每个卡片都含链接、按钮、加入购物车表单，一旦开启 dense，Tab 键焦点会从第 1 列跳到第 3 列再跳回第 2 列，键盘用户根本没法连贯操作。
- 上线前必须用键盘 Tab 过一遍：从第一个商品链接开始，连续按 Tab，确认焦点顺序与视觉顺序一致
- 真要兼顾紧凑性和可访问性，就关掉
dense，改用grid-auto-flow: row，靠 JS 动态计算插入位置——但这已超出纯 CSS 范畴，需额外维护高度队列 - 别信“dense 只影响渲染”的说法：它直接影响
document.querySelectorAll('.item')的返回顺序，SSR 或 SEO 抓取也会拿到错序 DOM
最易被忽略的是：移动端媒体查询不能只调列宽，minmax() 的最小值和 grid-auto-rows 的最小高度必须同步下调，否则小屏下卡片挤压变形、文字重叠、按钮误触率飙升——这些细节在用户放大截图投诉时才暴露，但修复成本远高于初期多写两行 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
