auto-fill会创建尽可能多的轨道并保留空白，auto-fit则只创建有内容的轨道并拉伸填满空间。例如容器宽500px、最小列宽100px时，auto-fill始终生成5个轨道（空位保留），而auto-fit仅生成实际需要的列数并扩展占满剩余空间，实现紧凑布局。区别在于是否保留空白轨道。
在 CSS Grid 布局中，auto-fill 和 auto-fit 都用于配合
repeat()
函数自动创建网格轨道，尤其在使用
minmax()
时非常有用。它们看起来相似，但在行为上有关键区别。
auto-fill：填充可用空间，即使格子为空
当使用 auto-fill 时，Grid 容器会尽可能多地创建符合最小宽度要求的列（或行），即使这些列没有内容也会被创建出来。空白的轨道会保留在布局中。
例如：
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
只要容器宽度允许，哪怕没有足够子元素，也会生成多个 100px 起步的列。如果有空余空间，这些列会平均分配空间（因为用了 1fr），但不会合并空白列。
立即学习“前端免费学习笔记（深入）”；
auto-fit：只创建有内容的列，并拉伸填满空间
auto-fit 的行为类似 auto-fill，但它会把“空”的列去掉，并让有内容的列扩展，以填满整个容器。
同样代码，只改关键字：
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
这时 Grid 只创建刚好容纳子元素的列数，并且这些列会拉伸占据所有剩余空间。适合实现“紧凑自适应”布局。
直观对比场景
假设容器宽 500px，每列最小 100px：
- auto-fill：最多可放 5 列 → 创建 5 个轨道，即使只有 2 个子元素，剩下 3 个为空
- auto-fit：只创建 2 列 → 然后这 2 列拉伸占满 500px
基本上就这些。简单记：auto-fill “先占位”，auto-fit “后拉伸”。根据是否希望空白轨道存在来选择。