移动端Grid兼容性问题需组合检测+外置降级：@supports (display: grid) and (grid-template-columns: 1fr)为唯一可靠起点，Safari≤14、Android WebView≤75等环境会静默丢弃gap或整个grid声明，必须用margin fallback并手动写行列定位。
移动端 Grid 兼容性问题不能靠“写了 @supports 就万事大吉”—— Safari ≤14.0、Android WebView ≤75、微信 X5 v6.x 前等环境会静默丢弃 gap、grid-template-areas，甚至整个 display: grid 声明，导致白屏或塌陷。必须用组合检测 + 外置降级 + 手动 fallback。
@supports (display: grid) and (grid-template-columns: 1fr) 是唯一靠谱的检测起点
只写 @supports (display: grid) 会让 Safari 10.1、iOS Safari 15.6 这类“半支持”浏览器误入 Grid 分支：它们能解析 display: grid，但不支持 fr 单位或 gap，结果布局直接碎裂。
- 必须加约束条件，推荐
@supports (display: grid) and (grid-template-columns: 1fr)——同时验证 display 和核心模板语法，能筛掉 IE、Safari ≤10.1、老 Android WebView - 别用
@supports (gap: 0)：Firefox 63 以前不支持，反而把大量现代浏览器拦在外面 - IE11 完全忽略
@supports块，所以降级样式（如display: flex）必须写在块外，且语法得是它能理解的（比如用margin代替gap）
gap 在 iOS 14.4 及更早、Android WebView ≤75 中根本不会解析
这些内核压根不认识 gap，DevTools 的 Computed 面板里搜不到值，Styles 面板显示为灰色或删除线。这不是“不生效”，是声明被静默丢弃。
- 改用
grid-row-gap和grid-column-gap能绕过部分兼容问题，但必须两个都写；只写一个，另一方向间隙为 0 - autoprefixer 默认不转换
gap，需显式配置grid: true，且源码里必须写gap才触发补全 - 最稳 fallback 是
margin：所有网格项加box-sizing: border-box，横向用margin-right+:nth-child(3n) { margin-right: 0; }（假设每行 3 列），纵向同理 - 注意：
grid-template-columns写死像素（如500px 500px）会导致gap没空间可分配——浏览器优先保证列宽，把gap压成 0；得改成1fr 1fr或minmax(0, 1fr) 1fr
旧版 Safari（≤14.0）和微信 X5 不支持 grid-template-areas
强行使用会导致整个 display: grid 声明失效，回退为 display: block，布局彻底退化为单列流式。
立即学习“前端免费学习笔记（深入）”；
- 必须移除
grid-template-areas，改用显式行列线定位：grid-column: 1 / -1（跨整行）、grid-row: 2（第二行） -
-1表示隐式最后一根线，所有支持 Grid 的旧内核都认，比span 2更可靠 - 别在媒体查询里只改
grid-template-areas：Safari ≤14 根本不识别这行代码，结果仍是 block 布局；必须重写整套grid-column/grid-row定位规则 - 禁用
display: contents——它会让子元素脱离网格上下文，@supports也救不了
Android 4.4 WebView（Chromium 30）对 Grid 零支持，@supports 失效
它不认识 display: grid、grid-gap 等任何 Grid 属性，遇到就静默丢弃整条规则。如果页面结构全靠 Grid 构建，#app 容器可能变成 display: block 且无宽高约束，直接白屏。
-
@supports (display: grid)在 Android 4.4 中同样不被识别，检测块会被跳过；必须用 JS 组合检测：/(Android\s+4\.4|Chrome\/30)/.test(navigator.userAgent)+ 创建临时元素验证 - 别用
css-grid-polyfill：它通过 JS 动态插入position: absolute元素模拟 Grid，在 Android 4.4 上滚动卡顿、输入延迟严重，且破坏原生事件流 - 真正可行的是两套样式 + 条件 class 切换：JS 检测后给
<html>加no-grid类，CSS 里写.no-grid .grid { display: flex; }，并配合媒体查询确保小屏可用
真正麻烦的不是写两套样式，而是 subgrid、gap、grid-template-areas 这些特性在降级时没有等价替代；@supports 只是分流开关，具体怎么 fallback 得手动算清楚轨道数、手动写死行列索引、手动用 margin 模拟间隙——漏掉任意一环，真机上就是白屏或错位。
