auto-fill 保留不足最小宽度的空轨道，auto-fit 则丢弃它；前者确保列数稳定但可能挤压内容，后者使内容舒展但列数动态减少，调试时需关注最小宽度临界点。
auto-fill 和 auto-fit 都会创建重复的轨道，但行为关键差异在“空轨道是否保留”
两者都用在 grid-template-columns 或 grid-template-rows 中配合 repeat()，比如 repeat(auto-fill, minmax(200px, 1fr))。区别不在“能不能撑满容器”，而在于：当剩余空间不足以放入一个完整轨道时，auto-fill 仍会保留该空轨道（尺寸为 minmax() 的最小值），auto-fit 则直接丢弃它，把空间分给已有轨道。
常见错误：以为 auto-fit 总是“更紧凑”，结果列数意外减少
这是最易踩的坑——尤其在响应式场景下。例如容器宽 590px，轨道定义为 minmax(200px, 1fr)：
-
auto-fill：生成 3 列（200px + 200px + 190px 占位），第三列虽不足 200px 也保留，内容可能被挤压或换行 -
auto-fit：只生成 2 列，剩余 190px 空间被均分进前两列 → 每列变成 ~295px，内容舒展，但列数变少
如果你依赖固定列数做对齐或动画，auto-fit 可能导致布局跳变。
何时选 auto-fill？何时选 auto-fit？
看你的核心目标：
立即学习“前端免费学习笔记（深入）”；
- 需要**稳定列数上限**（比如卡片网格最多排 4 列，窄屏也保持占位）→ 用
auto-fill - 希望**内容尽可能撑满可用宽度**，且不介意列数动态变化 → 用
auto-fit - 配合
gap使用时，auto-fill的空轨道仍受gap影响，可能产生多余空白；auto-fit因无空轨道，gap 更“干净”
注意：auto-fit 对空轨道的“丢弃”发生在布局计算阶段，不是 js 控制，也不触发重排——这点常被误认为有性能差异，其实二者开销一致。
调试技巧：用浏览器 DevTools 实时观察轨道数量变化
在 Elements 面板中选中 Grid 容器，勾选“Show grid line numbers”和“Show track sizes”，就能直观看到每种模式下实际生成了几条列线。重点观察最小宽度临界点（如 200px）附近：当容器宽度从 600px 缩到 599px，auto-fit 可能立刻从 3 列跳成 2 列，而 auto-fill 仍显示 3 条线——那第三条线对应的是个不可见但真实存在的轨道。
这个临界行为很容易被忽略，尤其在移动端混合设备像素比时，1px 差异就可能导致布局断层。