auto-fit 丢弃空轨道，auto-fill 保留空轨道；前者按子元素数量建列后分配剩余空间，后者按容器宽度和 minmax 最小值尽可能多建列。
auto-fit 会丢弃空轨道，auto-fill 会保留它
这是最根本的区别，不是“填不填满容器”，而是浏览器是否把没内容的轨道当真实存在。两者都写在 repeat() 里，但计算逻辑相反：auto-fill 先按容器宽度和 minmax() 最小值，尽可能多地建列（哪怕没子元素）；auto-fit 先数有几个子元素，只建够用的列，再把空轨道原本占的空间分给现有列。
常见错误现象：
-
auto-fill在只有 2 张卡片、容器宽 900px 时生成了 3 列 → 右侧留白，甚至触发横向滚动条 -
auto-fit同样条件下只建 2 列 → 卡片拉伸到 ~450px 宽，不留白，但列数变少了
为什么设置了 auto-fit 还是只显示一列
不是代码写错了，而是浏览器没算出第二列的空间。关键原因有两个：
- 父容器没有有效宽度：比如在
flex布局里没设flex: 1或width: 100%，导致 Grid 拿不到可用行内宽度 - 卡片自身写了
width: 100%、max-width或min-width→ 它拒绝收缩，Grid 就认为“塞不下第二列” -
gap被忽略：实际可用宽度 = 容器宽 − (列数 − 1) ×gap，但很多人写minmax(280px, 1fr)+gap: 1rem，结果临界点左移约 32px，本该 3 列的宽度意外退成 2 列
调试时打开 DevTools 的 Grid 面板，勾选 “Show track sizes”，直接看列线数量是否随缩放跳变——这才是真实列数。
什么时候该用 auto-fill，而不是 auto-fit
别凭直觉选，看你的布局是否依赖“轨道存在性”：
- 需要预留插槽：比如拖拽组件、仪表盘格子、hover 出现空白卡片区域 → 用
auto-fill - 要 nth-child(3n) 样式稳定对齐，或动画过程中列数不能突变 → 用
auto-fill - 卡片数量不确定，且希望内容始终撑满整行 → 用
auto-fit - IE 兼容必须考虑：IE 完全不支持
auto-fit，旧版 Safari（≤15.4）在嵌套 Grid 中对auto-fit渲染异常
gap 怎么影响 auto-fit 和 auto-fill 的列数
gap 不是视觉装饰，它直接参与轨道数量计算。浏览器算“最多能塞几列”时，是拿容器宽度减去所有 gap 占位后，再除以 minmax() 的最小值。
- 错误写法：
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))); gap: 1rem;→ 实际少算约 32px，可能在 899px 宽度就退为 2 列 - 稳妥解法：把
gap算进最小值，改用minmax(calc(300px + 1rem), 1fr)，再保留gap: 1rem - 更灵活方案：用
minmax(max-content, 1fr)替代固定像素下限，让列宽随内容自然伸缩，避开硬编码临界点
临界点抖动不是 bug，是规范行为。如果你看到列数在缩放时“跳变”，先检查 gap 和 minmax() 最小值是否匹配，而不是怀疑 CSS 写错了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
