auto-fill强制保留所有可能列的占位，确保瀑布流中后续高卡片能塞入已有列；auto-fit则收缩空列导致列数突变，破坏布局稳定性。
必须用 auto-fill 而不是 auto-fit
刚加载几项时只显示 1 列，滚动后突然变成 3 列？这是 auto-fit 在收缩空列轨道。它会把没内容的列完全抹掉，导致浏览器实际渲染列数少于你预留的“槽位”。瀑布流依赖列槽始终存在——因为图片高度不一，后续高卡片需要被塞进已有列中，而不是等列数重新计算后再分配。
auto-fill 强制保留所有可能列的占位，哪怕某列暂时为空。这是行为差异的根本：不是“哪个更智能”，而是“哪个能让 Grid 渲染引擎提前知道列结构”。
- 写法必须是
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) - 别在媒体查询里临时换
auto-fit—— 一旦列结构变化，已渲染卡片的位置可能跳变 - 空数据时整页塌成一条线？大概率是误用了
auto-fit
grid-auto-rows 必须设为 minmax(100px, auto)
写成 100px 固定值：图片会被裁剪、文字换行错乱、卡片底部留大片空白；写成单独 auto：旧版 Chromium（如 Chrome 90 前）会忽略它，导致行高塌陷为 0。
minmax(100px, auto) 是唯一稳妥解：给最小高度兜底防塌陷，又允许内容自然撑开。它不是为了“控制视觉行高”，而是给 Grid 渲染引擎一个轨道参考基准。
- 别用
fit-content—— CSS 规范明确不支持它在 Grid 行方向生效 - 如果卡片内有纯文本且高度极小（比如只有 1 行字），
100px下限能防止它被压扁或消失 - 这个值不是像素魔法，可按业务调低到
80px，但别低于60px，否则小图标卡片易塌
图片底部多出 4px 空白？加 display: block 就行
这不是 Grid 的锅，是 <img> 默认 vertical-align: baseline 导致的基线对齐问题。只要图片是 inline 元素，父容器行盒（line box）就会为基线留出空间。
修补方式只有两个硬要求：
- 必须加
display: block或vertical-align: top到<img>上 - 顺手加上
width: 100%; height: auto;，确保比例协调且不溢出格子 - 别用
margin-bottom: -4px—— 字体、字号一变，这个像素值就失效 - 也别依赖
line-height: 0—— 它会影响同容器内其他文本，副作用不可控
移动端必须配 @media 降 minmax() 最小宽度
minmax(240px, 1fr) 在小屏下依然生效，结果是强行撑出两列，每列窄得只剩图标，用户滑半天才看到第二张图。
必须用媒体查询主动干预：
@media (max-width: 768px) { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }- 如果卡片含密集文字（比如商品标题+价格+标签），建议进一步降到
120px - 同步缩
gap：大屏用16px，小屏改8px，否则间距会挤压内容 - 别只调列宽不调字体——Grid 不管
font-size，小屏下记得检查文字是否可读
auto-fill 和 minmax() 的组合行为。一个像素的间隙、一次列数跳变，往往源于对这两个关键词底层逻辑的误判。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
