auto-fit丢弃空轨道而auto-fill保留空轨道，前者按子元素数量建轨并均分宽度，后者按容器宽度和minmax最小值硬算最大列数，空轨道参与gap计算、tab序及屏幕阅读器识别。
auto-fit 会丢弃空轨道，auto-fill 会保留它
这是最根本的区别，不是“填不填满容器”，而是浏览器在生成列线前就决定是否创建那些没内容的轨道。auto-fit 先数子元素个数，再建对应数量的轨道，然后把整行宽度均分过去；auto-fill 则不管有没有内容，只要容器够宽、满足 minmax() 最小值，就硬算最多能塞几列。
常见错误现象：grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) 在 900px 容器中生成了 3 列，但只放了 1 个卡片——右侧留白明显，甚至触发横向滚动。那 2 条空轨道真实存在，参与 gap 计算、影响 tab 键序、被屏幕阅读器识别。
而用 auto-fit 时，DevTools 的 Grid 面板里只会显示 1 条列线，卡片直接占满 900px 宽度（减去 gap 后）。
列数跳变发生在 auto-fit 的临界点，不是 bug 是规范行为
比如 minmax(280px, 1fr) 搭配 gap: 1rem，实际可用宽度 = 容器宽 − (列数 − 1) × 1rem。浏览器拿这个值除以 280px，向下取整得到列数。所以当容器从 840px 缩到 839px，计算结果可能从 3.0 变成 2.99 → 向下取整为 2，列数立刻跳变。
- 这个跳变受
gap显著影响：3 列时扣掉 2 个 gap，临界点比预期左移约 32px - 不要只看视觉，打开 DevTools Grid 面板，勾选 “Show track sizes”，直接观察列线数量是否突变
- 若需稳定列数（比如动画对齐、
:nth-child样式），优先用auto-fill；若接受跳变但要内容舒展，才选auto-fit
gap 不是装饰，它直接参与轨道数量计算
gap 被计入容器总宽度分配，但 minmax() 的最小值只约束单列宽度。浏览器算“最多能塞几列”时，是拿容器宽减去所有 gap 占位后，再除以最小值。
错误写法：grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; → 实际少算约 32px，可能意外退为单列。
稳妥解法：minmax(calc(300px + 1rem), 1fr)，再保留 gap: 1rem；或者更灵活地用 minmax(max-content, 1fr)，让列宽随内容自然伸缩，避开硬编码临界点。
为什么写了 auto-fit 却只显示一列？
大概率不是语法错，而是上下文不满足前提：
- 父容器没设宽度（如
display: inline-grid，或 flex 容器中未设flex: 1），Grid 失去计算基础 - 卡片内有未收敛的内容：
<img>缺max-width: 100%、嵌套flex子项缺min-width: 0、文字块有white-space: nowrap - Safari ≤16.3 对
repeat(auto-fit, 1fr)（没minmax()）会静默退化为单列；IE 完全不支持
真正难调的从来不是语法，而是动态增减内容时，auto-fit 的列数跳变引发视觉抖动，或 auto-fill 的隐形空列在 JS 动画中暴露占位问题——这时候得靠 grid-auto-flow: dense 或显式 grid-column 控制，不能只依赖 repeat 行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
