真正能实现自适应网格的是auto-fit；auto-fill仅按minmax下限预设轨道数，导致空轨道占位、右侧留白或横向滚动，仅适用于需固定物理占位的场景。
别用 auto-fill 做“自适应网格”——它根本不是为这个设计的。 真正能填满容器、随内容缩放列数的，是 auto-fit；auto-fill 只负责“尽可能多地预留轨道”，哪怕全空也会占位，结果常是右侧留白、横向滚动或 DevTools 里看到 grid-column-end 跳到 5 却只渲染了 2 个子项。
为什么 auto-fill 在响应式场景下大概率翻车
它按 minmax() 下限（比如 250px）暴力算出理论最大列数，并全部生成轨道。容器宽 800px → 算出最多 3 列 → 就真建 3 条轨道。但若只有 2 个卡片，第 3 条轨道就是空的，仍参与 gap 计算、仍占用空间。
- 小屏下容易触发
overflow-x: scroll，尤其父容器没设overflow-x: hidden - 子项少时列数虚高，视觉上“格子比内容多”，不像自适应，像卡顿
- 和
grid-auto-flow: column混用会错乱：内容从上往下灌进第一列，不是你想要的横向换行
auto-fill 的唯一合理使用场景
它只适合需要“物理占位”的固定结构，且你明确知道轨道数必须恒定、后续会动态插入内容。
- 仪表盘拖拽区：提前声明 4×4 网格，空槽位必须可见可拖入
- 像素画布或棋盘类 UI：每个单元格尺寸严格一致（如
minmax(16px, 16px)），不能合并 - 配合
grid-auto-flow: column做垂直瀑布流，且要求列数不随内容增减（例如相册按列分组）
minmax() 参数写错，auto-fill 直接失效
minmax() 不是“最小宽度 + 最大宽度”，第一个参数是轨道**最小可取值**，第二个是**单轨道最大可取份额**。写错就失去弹性约束：
- ❌
minmax(250px, auto)：浏览器静默降级为max-content，列宽失控 - ❌
minmax(250px, 2fr)：fr 单位在 max 位置非法，退化为max-content，auto-fill失去意义 - ❌
minmax(1px, 1fr)：浏览器有最小轨道限制（通常 ≥10px），实际可能只生成 1 列，还留大片空白 - ✅ 正确写法只有
minmax(或, 1fr) minmax(, max-content)
真要“自适应”，请直接切到 auto-fit
把 auto-fill 换成 auto-fit 是最轻量、最可靠的修复。它会在生成轨道后，把没内容的空轨道尺寸设为 0，再让非空轨道用 1fr 平分剩余空间：
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)));
这行代码就能让 1 个卡片占满一行、2 个卡片平分、4 个卡片四等分——无需媒体查询，也不依赖 JS。唯一要注意的是：子项不能设 width、不能 float、不能 position: absolute，否则 Grid 自动计算就失效了。
真正难的不是写对语法，而是意识到 auto-fill 的“填充”不是填内容，是填轨道；而人眼看到的“自适应”，几乎总是 auto-fit 的行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
