auto-fill保留空轨道，auto-fit丢弃空轨道；前者按minmax最小值尽可能建轨并留白，后者按子元素数量建轨后均分空间，临界点缩放易致列数跳变。
auto-fill 会保留空轨道，auto-fit 会丢弃它
这是最本质的区别，不是“填不填满容器”，而是浏览器如何处理那些没内容的轨道。两者都用在 repeat() 里，但计算流程完全不同：auto-fill 先按 minmax() 的最小值尽可能多地生成轨道，不管有没有子元素；auto-fit 则先看有多少个子元素，只建够用的轨道，再把空轨道原本占的空间分给现有列。
常见错误现象：grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) 在 800px 宽容器中生成了 3 列，但只放了 2 个卡片——右侧出现明显空白，且第三列虽为空，仍参与 1fr 分配，可能挤压内容。
-
auto-fill的空轨道真实存在，影响gap计算（比如 3 列有 2 个gap）、tab 键序、屏幕阅读器遍历 -
auto-fit的空轨道被彻底移除，不占位、不分空间、不触发gap - 两者在 DevTools 的 Grid 面板中表现不同：勾选 “Show track sizes” 后，
auto-fill显示更多列线，auto-fit只显示有内容的列线数量
列数突变常发生在 minmax() 最小值临界点
比如 minmax(280px, 1fr) 搭配 auto-fit，当容器宽度从 840px 缩到 839px，列数可能从 3 跳成 2——因为 839 ÷ 280 ≈ 2.99，向下取整后只剩 2 个完整轨道空间。这个跳变不是 bug，是规范行为，但容易引发布局抖动。
- 临界点受
gap影响：实际可用宽度 = 容器宽 − (列数 − 1) ×gap，所以gap: 1rem会让临界点左移约 16px - 调试时不要只看视觉，要打开 DevTools Grid 面板，观察列线数量是否在缩放时突然减少
- 若需稳定列数（如动画对齐、nth-child 样式），优先用
auto-fill；若接受列数变化但要内容舒展，才选auto-fit
gap 不是装饰，它直接参与轨道数量计算
gap 被计入容器总宽度分配，但 minmax() 的最小值只约束单列宽度。浏览器算“最多能塞几列”时，是拿容器宽减去所有 gap 占位后，再除以最小值。这导致很多“明明够宽却少一列”的问题。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))); gap: 1rem;→ 实际少算约 16px，可能意外退为单列 - 稳妥解法：把
gap算进最小值，改用minmax(calc(300px + 1rem), 1fr)，再保留gap: 1rem - 更灵活方案：用
minmax(max-content, 1fr)替代固定像素下限，让列宽随内容自然伸缩，避开硬编码临界点
IE 和旧版 Safari 的兼容性陷阱不能只靠降级
IE 完全不支持 auto-fill 和 auto-fit，旧版 Safari（≤15.4）在嵌套 Grid 中对 auto-fit 渲染异常，表现为列宽归零或轨道漏算。这不是渐进增强能简单兜住的问题。
- IE 下必须显式回退，例如用
@supports not (grid-template-columns: repeat(auto-fit, 1fr)))包裹降级规则 - Safari ≤15.4 建议外层用
auto-fill，内层 Grid 改用显式repeat(3, 1fr)或grid-template-columns: 1fr 1fr 1fr - Firefox 在 flex-grid 混合布局中对
auto-fit回收空轨道偏保守，偶尔多留一列空白，可加grid-auto-flow: dense辅助填充
auto-fit 的列数跳变会引发视觉突兀；而 auto-fill 的隐形空列又容易在 JS 动画中暴露占位问题。这时候得靠 grid-auto-flow: dense 或显式设置 grid-column 来兜底，不能只靠 repeat() 行为。 
