auto-fit丢弃空轨道导致列数突变，auto-fill保留空轨道引发留白或滚动；前者依子项数量建轨并均分宽度，后者按minmax下限硬算最大列数并占位。
因为 auto-fit 会丢弃空轨道，auto-fill 会保留空轨道——这不是渲染“效果差异”，而是浏览器在布局计算阶段就做出的根本性行为区别。
auto-fit 为什么列数会突然减少？
它不按容器宽度上限算最多能塞几列，而是先数子元素个数，再决定建几条轨道。比如 minmax(280px, 1fr) 搭配 2 个卡片，在 850px 容器里只建 2 条轨道，每条约 425px；缩到 839px 时，可用宽度（已扣减 gap）可能连 2 条完整轨道都撑不满，于是回退为 1 列。
-
gap会从容器宽里提前扣减：3 列有 2 个gap，实际可用宽度 = 容器宽 − 2 ×gap - 临界点浮动明显：1px 缩放就可能触发列数跳变，尤其当
minmax()下限 +gap接近容器宽度时 - DevTools 的 Grid 面板勾选 “Show track sizes” 可直接验证——列线数量是否在缩放中突变
auto-fill 为什么右侧总有留白甚至横向滚动？
它不管有没有内容，只按 minmax() 最小值和容器宽度“硬算”最多能建几列。例如 repeat(auto-fill, minmax(280px, 1fr)) 在 900px 容器中生成 3 列（900 ÷ 280 ≈ 3.2 → 向下取整为 3），但只有 1 个卡片时，剩下 2 条空轨道依然真实存在、参与 1fr 分配，还计入 gap 计算。
- 空轨道影响 tab 键序、屏幕阅读器遍历，甚至 JS 中的
grid-column计算 - 若子项含
flex: 1或图片未设max-width: 100%，实际宽度可能撑开单格，进一步加剧留白或滚动 - 加
grid-auto-flow: dense只能缓解跨行空白，不能消除空轨道本身
怎么选才不容易翻车？
关键看你要不要“隐形占位”：
- 选
auto-fill当你需要结构稳定：仪表盘 widget 区域、日历格子、拖拽式插槽、动画依赖固定列数对齐 - 选
auto-fit当你要内容自适应填满：商品列表、新闻卡片、相册——有多少项就撑多宽，不留空列 - IE 完全不支持
auto-fit，仅支持auto-fill（且行为略有不同）；旧版 Safari（iOS 14.x 及更早）可能把auto-fit当成auto-fill处理 - 调试时别只看视觉：删掉
gap看列数是否恢复预期，是快速定位问题的实操技巧
真正难调的不是语法，而是动态增减内容（如搜索过滤、分页加载）时，auto-fit 的列数跳变会引发视觉抖动，而 auto-fill 的隐形空列可能在 JS 中暴露为“存在但不可见”的 DOM 占位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
