应使用 auto-fill 而非 auto-fit，因 auto-fill 保留空列占位以支持瀑布流布局；grid-auto-rows 须设为 minmax(100px, auto) 防塌陷与裁剪；图片需加 display: block 或 vertical-align: top 消除基线空白；禁用 dense 以保障可访问性；移动端需媒体查询降低 minmax 最小宽度。
直接用 grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) + grid-auto-rows: minmax(100px, auto) + gap 就能跑起来，但必须注意 auto-fill 和 auto-fit 的行为差异，否则在小屏或空数据时列会塌掉。
为什么不能写成 auto-fit
auto-fit 会在没有内容的列上收缩空白，导致实际列数少于预期；auto-fill 则保留所有可能列的占位，哪怕某列暂时为空——这对瀑布流更关键，因为图片高度不一，浏览器需要“预留列槽”才能把后续高卡片塞进合适位置。常见现象是：列表刚加载几项时，只显示 1 列，滚动后才突然变成 3 列，这就是 auto-fit 在作祟。
grid-auto-rows 设成固定值（比如 100px）会出问题
固定行高会让图片被裁剪、文字换行错乱，或者卡片底部留大片空白。正确做法是用 minmax(100px, auto)：给最小高度兜底（防极矮卡片塌陷），又允许内容撑开。别用 auto 单独写，某些旧版 Chromium 会忽略它；也别用 fit-content，它在 Grid 行高里不生效。
图片错位、底部多出 4px 空白？不是 Grid 的锅
这是 <img> 默认为 inline 元素，基线对齐（vertical-align: baseline）导致的。解决方式只有两个硬要求：
立即学习“前端免费学习笔记（深入）”；
- 所有图片加
width: 100%; height: auto; - 加
display: block;或vertical-align: top;
别试图用 margin-bottom: -4px 修补——不同字体、不同字号下这个像素值会变；也别依赖 line-height: 0，它会影响父容器内其他文本。
grid-auto-flow: dense 是双刃剑
它能让卡片填满空隙，视觉更紧凑，但会打乱 DOM 顺序。如果你有键盘 tab 导航、屏幕阅读器需求，或卡片内含表单/链接，dense 可能导致焦点跳转错乱。上线前务必用键盘 Tab 过一遍顺序。真要兼顾可访问性，就放弃 dense，改用 grid-auto-flow: row，再靠 JS 动态计算插入位置——但这已超出纯 CSS 范畴。
最易被忽略的一点：移动端下 minmax(240px, 1fr) 依然生效，结果是小屏强行撑出两列，每列窄得只剩图标。必须配 @media (max-width: 768px) 把最小宽度降到 160px，否则用户滑半天才看到第二张图。
