先记住这个答案
容器宽度可放四列，实际只有两张卡片时，auto-fill 和 auto-fit 的差别最明显。两者都先按 repeat() 的限制生成重复轨道；项目排完后，前者留下未占用的重复轨道，后者折叠空轨道。若使用 minmax(200px, 1fr)，折叠出的空间可让已有卡片变宽。卡片数填满所有列时，两者通常看起来一样。
- 两者先按空间展开重复轨道
auto-fill保留空轨道auto-fit折叠空重复轨道- 列满时视觉结果可能相同
两张卡片为何没铺满容器
商品列表容器很宽，却暂时只有两张卡片。写 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))，浏览器仍为其他可能的列保留轨道，所以两张卡片不会铺满整行。改成 auto-fit 后，多余空轨道折叠，现有卡片分享空间。卡片数量足以填满所有重复轨道时，这两个取值往往看起来一样。
.products {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
/* 空重复列折叠，已有卡片可增长 */
}只有少量卡片时，折叠空重复列让现有列继续分享剩余宽度。
空重复轨道保留还是折叠
浏览器先按轨道的最大可容纳数量展开重复，再进行项目放置。auto-fit 只折叠没有被项目占据的自动重复轨道；这些轨道的间距也随之折叠。显式网格线仍可存在，所以不能把它理解成“从来没有创建过这些列”。auto-fill 的空列仍参与空间分配。实际列数还受容器可用宽度、gap、最小轨道尺寸影响，不能仅用容器宽除以 200px。
判断两者时，最好保持容器宽度不变，只改变卡片数量。比如三列空间里先放三张卡片，所有重复轨道都被占用，两种写法一般没有明显差别；删到一张卡片后，auto-fill 的空列还占轨道位置，唯一卡片仍留在自己的那一列。auto-fit 折叠空重复轨道，剩下的 1fr 卡片可能拉宽。折叠的是空轨道，不是把整个 Grid 项目隐藏；沟槽和轨道最终如何分配仍受模板与容器尺寸约束。
还要确认重复轨道的最小值能装进容器。repeat(auto-fit, minmax(200px, 1fr)) 在宽度足够时可能出现多列；窄到只容一列时，几乎没有空列可折叠，两者也就接近。用响应式窗口拖动观察轨道数，比单独记一句“fit 会铺满”更准确。
容易答错的地方
- 说
auto-fit只创建有内容的列 - 重复轨道先按空间创建，空轨道在自动放置后折叠；网格线行为也因此可能和直觉不同。
- 以为二者在任意布局都会明显不同
- 没有空的重复轨道，或轨道无法增长时，视觉差异可能很小。
面试官还会怎么问？
为什么常搭配 minmax(200px, 1fr)？
200px 给重复列一个可容纳的下限，1fr 让非空列分享余下空间，差别更容易体现。
gap 会影响能放几列吗？
会。列间距占用容器宽度，计算可容纳轨道数量时不能忽略。
什么时候选 auto-fill？
想保留空列位置，例如固定列节奏或预留将来的项目时；想让少量项目铺满行通常选 auto-fit。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。