auto-fill先建满所有可能轨道并留空占位，auto-fit按子元素数量建轨后拉伸填满；前者适合需预留插槽的场景，后者适合内容自适应布局。
auto-fill 和 auto-fit 的轨道生成逻辑完全不同
区别不在“能不能响应式”，而在“容器空间怎么分配”：auto-fill 是「先占位，后放内容」，auto-fit 是「按需建轨，再拉伸填满」。两者都用在 repeat() 里，但生成的轨道数量和后续行为截然不同。
auto-fill：强制创建所有可能的轨道，空着也留坑
浏览器会根据容器宽度，反复尝试塞入 minmax(最小值, 最大值) 定义的列，直到塞不下为止——哪怕没有对应子元素，这些轨道也真实存在，并参与空间分配。
- 例如容器宽
520px，minmax(150px, 1fr)→ 最多可放floor(520 / 150) = 3列？错，它算的是“能建几个 150px 起步的轨道”，实际会建 3 个（520 ÷ 150 ≈ 3.46 → 向下取整为 3），但若设成minmax(100px, 1fr)，就会建 5 个轨道（520 ÷ 100 = 5.2 → 向下取整为 5） - 只有 2 个子元素时，第 3–5 个轨道为空，但依然占位、分走空间（因用了
1fr，它们会均分剩余宽度） - 常见误用：窄屏下出现“一图占满整行+右侧大片留白”，就是因为
auto-fill预留了轨道却没内容填充
auto-fit：只建有内容的轨道，然后立刻拉伸填满
它先扫描子元素数量，确定最少需要几列；再用这些列去均分整个容器宽度——空轨道被直接忽略，不参与任何布局计算。
- 同上例：
520px容器 +minmax(100px, 1fr)+ 2 个子元素 → 只建 2 列，每列宽520px / 2 = 260px（只要 ≥100px 就合法） - 如果子元素增加到 4 个，就自动变成 4 列，每列约 130px；再增到 6 个，就换行（因单列不能小于 100px）
- 适合卡片列表、图片画廊等内容数量不确定的场景，视觉更紧凑，无意外留白
怎么选？看你要不要“预留插槽”
这不是性能或兼容性问题，而是设计意图的选择：
立即学习“前端免费学习笔记（深入）”；
- 需要固定对齐结构、未来要动态插入内容（比如后台管理的仪表盘格子）、或依赖 JS 操作空轨道位置 → 用
auto-fill - 追求内容自适应、避免空白浪费、组件尺寸随内容自然变化（如产品列表、导航按钮组）→ 用
auto-fit - 两者在小屏幕下表现趋同（可用空间少，轨道数少），差异在中大屏最明显
- 兼容性完全一致：Chrome 66+、Firefox 61+、Safari 11.1+ 均原生支持，无需前缀
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)));
gap: 16px;
}
真正容易被忽略的点是：你写的 minmax() 最小值，决定了换行临界点；而 auto-fill/auto-fit 决定了换行后那些“本可以存在但没内容”的轨道，到底该消失，还是该安静地待在那里。
