auto-fit 丢弃空轨道，auto-fill 保留空轨道；前者按子元素数量建等量轨道再均分宽度，导致列数跳变和卡片拉宽，后者按容器宽度硬算最大列数，产生留白和隐形空列。
auto-fit 会丢弃空轨道，auto-fill 会保留空轨道——这是最核心、不可绕过的区别。其他所有表现差异（留白、列数跳变、卡片拉宽）都源于此。
auto-fit 为什么卡片突然变宽、列数跳变？
它不按容器宽度“最多能塞几列”来建轨道，而是先数子元素个数，再建等量轨道，最后把整行宽度均分过去。
常见现象：grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 在 840px 容器中显示 3 列，缩到 839px 瞬间变成 2 列——不是 bug，是规范行为。
- 临界点由
minmax()最小值 +gap共同决定：实际可用宽度 = 容器宽 − (列数− 1) ×gap - 浏览器用这个“扣完 gap 的宽度”除以最小值，向下取整得轨道数
- 所以
gap: 1rem会让临界点左移约 32px（3 列时有 2 个 gap） - 调试时务必打开 DevTools Grid 面板，勾选 “Show track sizes”，看列线数量是否突变
auto-fill 为什么右侧留白甚至触发横向滚动？
它根本不管有没有内容，只按最小宽度和容器宽度“硬算”最多能建几列。哪怕只有一个卡片，只要容器够宽，就生成全部轨道。
例如 900px 容器 + minmax(280px, 1fr) → 900 ÷ 280 ≈ 3.2 → 向下取整为 3 列；但只放 1 个卡片时，剩下 2 条空轨道仍真实存在。
- 空轨道参与
1fr分配，导致有内容的卡片被挤压变窄 - 空轨道计入
gap计算：3 列产生 2 个gap，总空白 = 2 ×gap - 屏幕阅读器、Tab 键序、CSS
:nth-child()都会感知这些隐形列 - 想缓解留白？把
gap算进最小值：minmax(calc(280px + 1rem), 1fr)，再保留gap: 1rem
为什么写了 auto-fit 却只显示一列？
大概率不是语法错，而是上下文不满足自动列计算的前提。
- 父容器没设宽度：比如在
display: flex容器里未设flex: 1或width: 100%，Grid 就没“可用宽度”可算 - 子项没收敛尺寸：
max-width: 100%、嵌套flex缺min-width: 0、文字块有white-space: nowrap，都会撑开单列实际宽度 - 漏了
minmax()：写成repeat(auto-fit, 1fr)是无效的，必须带minmax() - Safari ≤16.3 对无
minmax()的auto-fit会静默退化为单列
该选哪个？关键看你要不要“空轨道”
选 auto-fit：卡片/图片/产品列表这类内容数量不确定、希望填满空间、接受列数动态变化的场景。
选 auto-fill：仪表盘 widget 区域、日历、拖拽占位槽、需要固定列数做动画对齐或 nth-child 样式控制的场景。
真正难调的从来不是语法本身，而是当卡片数量动态增减（比如搜索过滤、JS 插入）时，auto-fit 的列数跳变会引发视觉抖动，而 auto-fill 的隐形空列又可能在动画中暴露占位问题——这时候得靠 grid-auto-flow: dense 或显式 grid-column 控制，不能只依赖 repeat() 行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
