auto-fill保留空轨道占位，auto-fit丢弃空轨道并拉伸有内容的列填满容器；前者适合预留槽位场景，后者适合内容自适应布局，且更符合响应式卡片直觉。
auto-fit 和 auto-fill 的行为差异到底在哪
关键不是“哪个更高级”，而是浏览器怎么处理空轨道：auto-fill 会按 minmax() 尽可能多地生成列轨道，哪怕没内容也占位；auto-fit 做同样计算，但会把没内容的轨道合并掉，让有内容的列拉伸填满剩余空间。
常见错误现象：grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))) 在只有 2 个卡片时，小屏下仍生成 4 列——右侧留白或横向滚动，不是 bug，是 auto-fill 在“老实占位”。
-
auto-fill：适合需要固定槽位的场景，比如仪表盘预留格子、日历网格、拖拽式布局（空白区域要响应 hover） -
auto-fit：适合内容驱动型布局，比如商品列表、图片画廊、新闻卡片——有多少项就撑多宽，不留空列
为什么 90% 的响应式卡片布局该用 auto-fit
因为它的行为更符合“内容即布局”的直觉：容器变窄，列数自动减少；变宽，列数增加；内容少时，现有项自动拉伸填满整行，不会出现右侧大片空白。
典型写法：grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)))
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 最小宽度 280px 是为了防止文字挤成窄条；最大用
1fr让列均分剩余空间 - 别写
minmax(100px, 1fr)—— 小屏下会生成超窄列，导致文本频繁折行、图标错位 - IE 完全不支持
auto-fit，仅支持auto-fill（且行为略有不同），如需兼容 IE，只能退化为auto-fill+ 媒体查询兜底
gap 会偷偷影响 auto-fit 的列数计算
gap 被计入容器总宽度，但 minmax() 的最小值只管单列宽度。没预留 gap 空间，auto-fit 可能比预期少一列。
例如：容器宽 920px，minmax(300px, 1fr)，gap: 1rem（≈16px）。理论上 3×300 = 900px，但实际可用宽度是 920 − 2×16 = 888px，不够塞下 3 列，结果回退为 2 列。
- 解决办法一：把 gap 算进下限，比如改用
minmax(calc(300px + 1rem), 1fr)（注意只加一个 gap，因为列间 gap 数 = 列数 − 1） - 解决办法二：用
max-content替代固定像素下限，避免硬编码，比如minmax(max-content, 1fr) - 验证方式：打开 DevTools，在 Elements 面板里临时删掉
gap，看列数是否恢复预期——这是快速定位问题的实操技巧
旧版 Safari 对 auto-fit 的兼容性坑点
iOS 和 macOS 上的 Safari 直到 15.4 版本才稳定支持 auto-fit。低于此版本（尤其是 iOS 14.x 及更早），auto-fit 表现可能等同于 auto-fill，或者直接失效回退为单列。
- 检测方式：用
@supports (grid-template-columns: repeat(auto-fit, 1fr)))包裹样式，做渐进增强 - 稳妥做法：对 Safari @media not all and (min-width: 0) and (height: 0) { /* Safari （实际项目中建议用 Autoprefixer 或 caniuse 数据驱动条件编译）
- 别依赖 JavaScript 检测，因为 Grid 渲染发生在 CSS 解析阶段，JS 读取到的列数已是最终结果，无法干预
实际用的时候，最常被忽略的不是语法，而是 gap 和 minmax() 下限之间的隐含关系，以及 Safari 15.4 这个隐形分水岭——调半天列数不对，八成卡在这两个点上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
