auto-fit丢弃空轨道，auto-fill保留空轨道；前者列数等于有内容的列数，后者按最小宽度硬算最大列数并全部保留。
auto-fit 会丢弃空轨道，auto-fill 会保留它
这是最根本的差异，不是“填不填满容器”，而是浏览器是否把没内容的轨道当真。两者都写在 repeat() 里，但计算逻辑完全不同：auto-fill 先按 minmax() 的最小值和容器宽度“硬算”最多能建几列，哪怕只放一个子项，所有算出来的轨道都真实存在；auto-fit 则先数有多少个子元素，只建够用的列数，再把空轨道原本占的空间直接分给现有列。
常见错误现象：grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) 在 900px 容器中生成了 3 列，但只放了 2 个卡片——第三列虽为空，仍参与 1fr 分配、计入 gap 计算，导致内容被挤压，右侧留白甚至触发横向滚动。
调试时打开 DevTools 的 Grid 面板，勾选 “Show track sizes”，auto-fill 显示的列线数量始终多于或等于子项数，auto-fit 显示的列线数永远等于当前有内容的列数。
列数突变常发生在 minmax() 最小值临界点
auto-fit 的列数不是平滑变化的，而是在缩放过程中突然跳变。比如 minmax(280px, 1fr) 搭配 gap: 1rem，实际可用宽度 = 容器宽 − (列数 − 1) × 16px。浏览器拿这个值除以 280，向下取整决定列数。所以从 840px 缩到 839px，可能就从 3 列跳成 2 列——这不是 bug，是规范行为。
auto-fill 不会跳变列数，它只管“最多能塞几列”，所以窄屏下更容易出现内容被压缩、换行或留白。
- 误以为
auto-fit更“稳定”，结果动画对齐错乱，是因为列数突变 - 用
auto-fill做卡片网格，发现小屏下卡片挤成一竖列还带大片空白，其实是空轨道在占位 - gap 不是视觉装饰，它直接吃掉容器宽度，让临界点左移——很多“明明够宽却少一列”的问题都出在这儿
怎么选：看你要不要空轨道参与布局
如果目标是让卡片舒展、不留白、不预留位置，选 auto-fit；如果需要固定列数上限（比如日历每月最多 7 列、拖拽区预留插槽），必须用 auto-fill。
容易被忽略的一点：auto-fill 的空轨道会影响 tab 键序、屏幕阅读器遍历顺序，而 auto-fit 的空轨道根本不存在，完全不影响可访问性。
稳妥写法示例（避开临界抖动）：grid-template-columns: repeat(auto-fit, minmax(calc(280px + 1rem), 1fr));gap: 1rem;
这样把 gap 算进最小值，让临界点更可控。
调试时别只盯视觉，要看 Grid 面板里的列线
缩放窗口时，光看卡片是否“看起来正常”容易误判。真正关键的是 DevTools Grid 面板里显示的列线数量是否跳变、是否多出不可见但真实的轨道线。
移动端尤其要注意设备像素比——1px 差异就可能导致列数在某些机型上断层，而这种断层在桌面端预览时根本看不到。
复杂点在于：这个跳变逻辑是纯 CSS 布局阶段完成的，不触发重排，也没法用 JS 监听，只能靠面板观察和临界值预估。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
