auto-fill会保留空轨道，auto-fit会丢弃空轨道并拉伸有内容的列；前者按minmax下限硬算最大列数并保留所有轨道，后者依子元素数量建轨后均分容器宽度，根本区别在布局计算阶段是否保留空轨道。
直接说结论：auto-fill 会保留空轨道，auto-fit 会丢弃空轨道并拉伸有内容的列——这不是“效果差异”，而是布局计算阶段的根本行为区别。
auto-fill 为什么总在右侧留白？
它不看子元素数量，只按 minmax() 下限和容器宽度“硬算”最多能塞几列。哪怕你只放一个 <div>，只要容器够宽，它就生成全部轨道。
<ul>
<li>例如 <code>grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) 在 900px 宽容器中会生成 3 列（900 ÷ 280 ≈ 3.2 → 3），即使只有 1 个子元素，剩下 2 条轨道仍真实存在、参与空间分配
gap 会影响空轨道数量：设了 gap: 1rem，浏览器会先从容器宽里扣掉所有 gap 占位，再算能放几列——容易比预期少一列1fr 影响：若用 minmax(280px, 1fr)，空列也会均分剩余空间，导致有内容的项被挤压变形auto-fit 的“突然变宽”是怎么回事？
它先数子元素个数，再决定建几条轨道。列数不是由容器宽度“上限”决定的，而是由“实际内容数”和“最小宽度”共同约束的。
- 比如容器宽 850px，
minmax(280px, 1fr)，理论上最多 3 列；但若只有 2 个子元素，auto-fit就只建 2 条轨道，把 850px 均分给它们 → 每列约 425px - 窗口缩到 849px 时可能立刻从 3 列跳成 2 列，卡片宽度突变——这是正常行为，不是 bug
- 这种跳变更明显当
minmax()下限 +gap接近容器宽度临界点时，1px 差异就能触发列数重算
怎么选？关键看你要不要“隐形占位”
选 auto-fill 当你需要结构稳定：仪表盘 widget 区域、日历格子、预留插槽、JS 动画依赖固定列数对齐；选 auto-fit 当你要内容自适应填满：卡片列表、相册、产品网格。
立即学习“前端免费学习笔记（深入）”；
- IE 完全不支持
auto-fit，只认auto-fill（且行为略有不同） - 用
grid-auto-flow: dense可缓解auto-fit下因跨列导致的空白问题，但它不改变轨道生成逻辑 - 真正难调的不是语法，而是动态增减内容（如搜索过滤、分页加载）时，
auto-fit的列数跳变会引发视觉抖动，而auto-fill的隐形空列可能在 JS 中暴露为“存在但不可见”的 DOM 占位
调试时别光看渲染结果——打开 DevTools 的 Grid 面板，勾选 “Show track sizes”，直接看列线数量变化。临界点附近那条“多出来又消失”的虚线，就是空轨道存不存在的证据。
