auto-fill保留空轨道，auto-fit折叠空轨道；前者按容器宽计算最大列数并全创建，后者仅建够用列数再分配空轨空间；gap参与列数计算，影响临界点；auto-fit适合卡片列表，auto-fill适合预留槽位。
auto-fill 会保留空轨道，auto-fit 会折叠空轨道
这是最根本的区别，不是“填不填满容器”，而是浏览器是否把没内容的列当真实存在来处理。两者都写在 repeat() 里，但计算逻辑完全不同：auto-fill 先按 minmax() 的最小值和容器宽度，算出“最多能塞几列”，然后不管有没有子元素，全建出来；auto-fit 则先数你有几个子元素，只建够用的列数，再把空轨道原本占的空间分给现有列。
常见错误现象：grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) 在 800px 宽容器中生成了 3 列，但只放了 2 个卡片——右侧出现明显空白，且第三列虽为空，仍参与 1fr 分配，可能挤压内容。
调试时打开 DevTools 的 Grid 面板，勾选 “Show track sizes”，auto-fill 显示的列线数量恒定（含空列），auto-fit 只显示有内容的列线数量。
gap 会直接影响 auto-fit 的列数临界点
gap 不是视觉装饰，它直接参与轨道数量计算。浏览器算“最多能塞几列”时，是拿容器宽减去所有 gap 占位后，再除以 minmax() 的最小值。这意味着：实际可用宽度 = 容器宽 − (列数 − 1) × gap。
例如 minmax(280px, 1fr) 搭配 gap: 1rem，当容器从 840px 缩到 839px，列数可能从 3 跳成 2——因为扣掉 gap 后，剩余空间已不够支撑 3 列的最小宽度。
- 错误写法：
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))); gap: 1rem;→ 实际少算约 32px（2 个 gap），可能意外退为单列 - 稳妥解法：
minmax(calc(300px + 1rem), 1fr)，再保留gap: 1rem - 更灵活方案：
minmax(max-content, 1fr)，让列宽随内容自然伸缩，避开硬编码临界点
auto-fit 更适合卡片列表，auto-fill 更适合预设占位
绝大多数响应式卡片布局应选 auto-fit——它真正实现“有多少内容就占多少空间”，且自动拉伸填满整行。比如 repeat(auto-fit, minmax(280px, 1fr)))，当容器宽度不足 560px（2×280）时自动退为单列，足够时立刻变为双列、三列…
auto-fill 适合需要预留槽位的场景，比如拖拽仪表盘、hover 显示空白卡片区域、或后续 JS 动态插入内容。它保证列数稳定，不会因内容增减导致布局跳动。
注意：grid-auto-flow 才决定是否换行，不是 auto-fill/auto-fit 控制的。默认 row 是横向填满再换行；若设为 column，则变成纵向填满再向右开新列。
图片或 flex 子项可能导致 auto-fit 只显示一列
这不是语法问题，而是 minmax() 的最小值被内容撑开了。浏览器按你写的 minmax(280px, 1fr) 去算列数，但如果子项内部有未约束的尺寸（比如一张未设 max-width: 100% 的图片，或一个未设 flex-shrink: 0 的 flex 项），单格实际宽度远超 280px，容器就塞不下第二列。
验证方法：临时给子项加 outline: 1px solid red，看是否溢出；或在 DevTools 中检查该网格项的 computed width 是否远大于预期。
容易被忽略的是：IE 完全不支持 auto-fit，只支持 auto-fill（且行为略有差异），如需兼容旧浏览器，得单独处理 fallback。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
