auto-fill保留空轨道，auto-fit丢弃空轨道；前者按minmax最小值建轨并留白，后者按子元素数量建轨后均分空间，临界点缩放易致列数跳变。
auto-fill 会保留空轨道，auto-fit 会丢弃它
这是最根本的区别，不是“填不填满容器”，而是浏览器如何处理没内容的轨道。两者都写在 repeat() 里，但计算流程完全不同：auto-fill 先按 minmax() 的最小值尽可能多地建列，不管有没有子元素；auto-fit 则先数有多少个子元素，只建够用的列，再把空轨道原本占的空间分给现有列。
常见错误现象：grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) 在 800px 宽容器中生成了 3 列，但只放了 2 个卡片——右侧出现明显空白，且第三列虽为空，仍参与 1fr 分配，可能挤压内容。
auto-fill 的空轨道真实存在，影响 gap 计算（比如 3 列有 2 个 gap）、tab 键序、屏幕阅读器遍历；auto-fit 的空轨道被彻底移除，不占位、不分空间、不触发 gap。
列数突变常发生在 minmax() 最小值临界点
auto-fit 的列数跳变不是 bug，是规范行为。例如 minmax(280px, 1fr) 搭配 auto-fit，当容器宽度从 840px 缩到 839px，列数可能从 3 跳成 2——因为 839 ÷ 280 ≈ 2.99，向下取整后只剩 2 个完整轨道空间。
gap 直接参与轨道数量计算：实际可用宽度 = 容器宽 − (列数 − 1) × gap。所以 gap: 1rem 会让临界点左移约 16px（单边）或 32px（3 列时）。
调试时不要只看视觉，要打开 DevTools Grid 面板，勾选 “Show track sizes”，观察列线数量是否在缩放时突然减少。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
为什么设置了 auto-fit 还是只显示一列？
最常见原因不是写法错，而是父容器没给明确宽度：
- 父元素是
display: inline-grid或未设width/max-width，导致 Grid 无可用行内宽度可算 - 卡片自身写了
width: 100%或max-width，拒绝收缩，Grid 就“放不下第二列” - 父容器在 flex 布局中未设
flex: 1或flex-basis，宽度塌陷为 0
检查 computed styles 中 grid-template-columns 实际计算出的列数，比看 DOM 更可靠。
IE 和旧版 Safari 的兼容性陷阱不能只靠降级
IE 完全不支持 auto-fill 和 auto-fit；旧版 Safari（≤15.4）在嵌套 Grid 中对 auto-fit 渲染异常，表现为列宽归零或错位。
不要只加 @supports 降级——得配合 JS 检测或服务端 UA 判断。更稳妥的做法是：关键布局用 auto-fill + 固定列数 fallback，非核心区域才用 auto-fit。
真正容易被忽略的是 gap 对临界点的偏移作用，以及移动端设备像素比下 1px 差异就可能导致布局断层——这不是写法问题，是渲染精度问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
