老旧浏览器对 auto-fit 兼容性差：ie11 完全忽略该关键字致网格失效；safari ≤15.6 能识别但错误解析 1fr；android 4.4 webview 不支持 display: grid。需用 @supports 双条件检测并分层降级，ie11 用 -ms-grid 固定列+媒体查询，safari 用 minmax(320px, max(320px, 1fr)) 修复，webview 需 js 探测走 float/flex 降级。
老旧浏览器（如 IE11、Safari ≤15.6、Android 4.4 WebView）根本不解析 auto-fit，遇到 repeat(auto-fit, minmax(320px, 1fr)) 会直接跳过整条 grid-template-columns 声明，导致容器回退为 display: block 或塌陷——这不是列数不准，是整个网格结构消失。
IE11 和 Safari ≤15.6 对 auto-fit 的处理方式完全不同
IE11 完全不认识 auto-fit 这个关键字，连带整条 grid-template-columns 规则被静默丢弃；Safari ≤15.6 虽能识别 auto-fit，但对 minmax() 中 1fr 的计算有严重偏差，常把单列拉满容器宽，撑破布局。两者都不能靠 Autoprefixer 补前缀解决，因为 auto-fit 是语法级不支持。
- IE11：必须放弃
auto-fit，改用固定列数 + 媒体查询分段控制 - Safari ≤15.6：保留
auto-fit，但要重写minmax()避开1fr的歧义解释 - Android 4.4 WebView：连
display: grid都不认，auto-fit根本没机会执行
@supports 检测必须带模板约束，否则无效
只写 @supports (display: grid) 会让 Safari 15.6 进入 Grid 分支，但它不支持 auto-fit 的完整语义，结果就是样式加载了、布局却错乱。必须加第二层约束，筛掉“半支持”环境：
- ✅ 推荐检测：
@supports (display: grid) and (grid-template-columns: repeat(auto-fit, 1fr))—— Safari 15.6 不支持该语法，整块被跳过 - ❌ 避免单条件：
@supports (display: grid)→ Safari 15.6 通过，但后续auto-fit失效 - ❌ 别用
@supports (grid-auto-flow: column)→ IE11 和旧 Safari 根本不识别这个属性，检测无意义
降级样式（如 display: flex 或固定列 grid-template-columns: 1fr）必须写在 @supports 块外部，且所有属性值都得是 IE11/Safari 9 能理解的（比如不用 gap，改用 margin）。
IE11 降级只能用固定列 + @media 分段，不能模拟 auto-fit
IE11 的 -ms-grid 不支持动态轨道计算，auto-fit 在它眼里就是非法字符串。你无法用 JS 或 CSS 模拟出“根据内容自动合并未填充列”的行为。唯一可行路径是人工分段：
- 默认（小屏）：
display: -ms-grid; -ms-grid-columns: 1fr; - ≥768px：
@media screen and (min-width: 768px) { -ms-grid-columns: 1fr 1fr; } - ≥1024px：
@media screen and (min-width: 1024px) { -ms-grid-columns: 1fr 1fr 1fr; } - 子项定位必须手动写：
-ms-grid-column: 1、-ms-grid-column: 2……不能依赖grid-column: auto
注意：IE11 对 fr 单位支持不稳定，建议在 -ms-grid-columns 中用百分比（如 50% 50%）或固定值（如 200px 200px）更稳妥。
Safari ≤15.6 可保留 auto-fit，但 minmax 必须改写
它能解析 auto-fit，但把 minmax(320px, 1fr) 中的 1fr 当作“尽可能大”，无视最小值。修复关键是绕过 1fr 的歧义：
- ✅ 正确写法：
minmax(320px, max(320px, 1fr))—— 显式声明下限，所有支持minmax()的 Safari 都认 - 必须同步加三项补丁：
width: 100%（防父容器干扰）、min-width: 0（防 flex 子项撑宽）、img { max-width: 100% }（防图片突破限制） - 别换
auto-fill：它会保留空轨道，在小屏下生成多列却只放一个卡片，右侧留白更难调试
真正麻烦的是混合场景：同一页面既有 Safari 15.6 用户，又有 Android 4.4 WebView 用户。这时不能只靠 CSS，得配合 JS UA 探测 + 临时元素验证，给 WebView 直接注入 .no-grid 类，走纯 float/flex 降级流——auto-fit 的兼容从来不是“写对一行 CSS 就完事”，而是按环境分层切流。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
