旧android webview和国产浏览器内核不识别display: grid声明，会静默丢弃整条规则且不触发fallback；ie11支持的是过时的-ms-grid语法，与现代grid完全不兼容；@supports检测在低版本中不可靠，需组合验证核心属性并辅以js特性检测。
因为这些内核压根不识别 display: grid 声明，直接跳过整条规则，连 fallback 都不会触发。
旧 Android WebView 和国产浏览器内核不解析 grid 声明
Android 10 及更早设备的系统 WebView（如 WebView/44、WebView/51）使用的是 Chromium ≤ 85 的 Blink 内核，它对 CSS Grid 的支持仅停留在“能解析 display: grid”的表层——一旦遇到 grid-template-areas、gap、fr 单位或 subgrid，就会静默丢弃整个声明块，不报错、不警告、也不回退到其他 display 值。
国产浏览器（如 QQ X5、UC 13.x）常伪造 Chrome/114.0 UA，但实际内核仍是 WebKit 衍生或极旧 Blink，grid-template-columns: 1fr 2fr 这类基础语法都可能被忽略。
- 验证方式：在真机 DevTools 中查看 computed 样式，若
display显示为block或初始值，说明 grid 声明未生效 - 不要依赖
getComputedStyle(el).display === 'grid'判断——旧内核返回空字符串或block，不可靠 - 真正有效的检测是
'grid' in document.documentElement.style，但它只能告诉你 JS 是否能设该属性，不能反映渲染结果
@supports (display: grid) 在部分低版本中形同虚设
Safari 10.1、iOS Safari 15.6、Android WebView 75 等“半支持”环境会通过 @supports (display: grid) 检测，却无法正确渲染 gap 或 grid-area，导致布局塌陷。它们认得关键字，但 layout engine 没走 Grid 路径。
更稳妥的写法是叠加核心模板能力验证：
@supports (display: grid) and (grid-template-columns: 1fr) and (gap: 1rem) { ... }
但注意：Safari ≤ 13.1 对 gap 的 @supports 检测本身就有 bug，会错误返回 true；所以生产环境建议用 grid-template-columns: 1fr + grid-template-rows: 1fr 组合判断，这两个属性在 Safari 10.1+ 才真正稳定。
- 禁用嵌套
@supports：外层@supports (display: grid)内再套一层@supports (gap: 1rem)，旧 Safari 会直接跳过整个块 - 降级样式必须写在
@supports外部，否则 IE11 和旧 WebView 根本看不到后备规则 - 别用
@supports (grid-gap: 1rem)：Firefox 63 之前不支持该语法，反而把大量现代浏览器拦在外面
IE11 不是“不支持 Grid”，而是支持另一套完全不兼容的语法
IE10–11 实现的是 2011 年草案版 Grid（display: -ms-grid），和现代 Grid 是两套平行世界：它不认识 grid-column、grid-template-areas、fr、gap，所有现代写法都会被忽略。
Autoprefixer 开启 grid: true 后，确实会生成 -ms-grid-column 等属性，但仅适用于固定行列数的简单网格；一旦涉及响应式（如 repeat(auto-fit, ...)）或命名区域，转换结果基本不可用。
- IE11 中
-ms-grid-column: 2表示“从第 2 条线开始”，不支持/语法或-1，终点需手动计算并用-ms-grid-column-span -
grid-gap在 IE11 中无对应属性，必须用margin模拟，且要配合:nth-child清除末尾项多余间距 -
@supports在 IE 中被完全忽略（不认识该 at-rule），所以任何基于它的降级都对 IE 无效
最易被忽略的一点：很多团队以为加了 Autoprefixer 就万事大吉，结果在某款定制 ROM 的 Android 8 设备上发现整个网格区域空白——那是因为该设备 WebView 内核是 Chromium 73，它既不支持 grid-template-areas 字符串语法，又不触发 @supports 降级，只默默按流式布局渲染子元素。这种场景下，唯一可靠的做法是 JS 特性检测 + class 控制布局切换，而不是把命运交给 CSS 规则本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
