auto-fill创建尽可能多的轨道，包括空轨道，保持项目最小宽度；auto-fit则只创建必要轨道并拉伸项目填满容器。两者核心区别在于处理多余空间的方式：auto-fill保留空白，auto-fit消除空白使内容自适应。选择取决于是否需要预留插槽或自动扩展布局。
在使用 css Grid 布局时，auto-fill 和 auto-fit 是两个常用于 repeat() 函数中的关键字，它们都能根据容器空间自动创建网格轨道。虽然看起来相似，但在行为上有重要区别。
auto-fill：填充可用空间，即使格子为空
使用 auto-fill 时，Grid 会尽可能多地创建指定尺寸的列（或行），哪怕这些列暂时没有内容填充。只要容器空间允许，就会生成新的网格轨道。
例如：
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
浏览器会计算容器宽度，每 100px 就创建一个新列，直到放不下为止。即使某些列没有内容，这些空轨道依然存在。
立即学习“前端免费学习笔记（深入）”；
auto-fit：拉伸已有项目，填满剩余空间
auto-fit 的行为类似 auto-fill，但它会在创建完所需轨道后，将有内容的列进行拉伸，以填满整个容器。
还是这个例子：
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
如果有 3 个项目，足够放下 6 列，auto-fit 只创建 3 列，并把这 3 列拉宽，占满容器。它不会保留空轨道，而是让已有项目“撑开”布局。
核心区别总结
- auto-fill：创建尽可能多的轨道，包括空轨道，项目保持最小宽度，多余空间留白。
- auto-fit：只创建必要的轨道，然后拉伸这些列以填满容器，不留空白。
- 当项目数量少于可容纳数量时，auto-fit 会让项目变宽；auto-fill 则保持项目原始大小。
基本上就这些。选择哪个取决于你想要“留空位”还是“自动扩展”。实际使用中，auto-fit 更适合响应式卡片布局，而 auto-fill 适合需要预留插槽的场景。不复杂但容易忽略细节。