grid布局在低版本浏览器中因不解析相关css声明而失效，需用@supports(display:grid)and(grid-template-columns:1fr)双条件检测，并在外层写兼容flex/float降级样式，gap/fr需手动fallback。
Grid 布局在 H5 页面中遇到低版本浏览器（如 Android 4.4 WebView、iOS ≤14.4 Safari、微信 X5 内核 v6.x 及更早）时，常出现白屏、单列流、错位或 gap/fr 完全失效等问题。根本原因不是“渲染不准”，而是这些内核压根不解析 display: grid、gap、1fr 或 grid-template-areas 等声明——整条规则被静默丢弃，Computed 面板里对应值为空或显示为 block。
用 @supports 双条件检测，筛掉“半支持”环境
@supports 不能只写 (display: grid)，否则 Safari 10.1、iOS 15.6 等会误入 Grid 分支，结果 gap 和 fr 全挂。必须加一条有代表性的模板语法做双重验证：
- ✅ 推荐检测：
@supports (display: grid) and (grid-template-columns: 1fr)—— 同时确认 display 支持 + 核心模板语法可用，能准确拦住 IE、Safari ≤10.1、Android 4.4 及大部分旧 WebView - ❌ 避免
@supports (gap: 1rem)：Firefox 63 以前不支持，反而把大量现代浏览器挡在外面 - ❌ 别嵌套
@supports (display: grid) { @supports (gap: 1rem) { ... } }：Safari 10.1 会直接跳过整个块，降级样式失效
降级样式必须写在 @supports 外层，且语法兼容
IE11 和 Android 4.4 WebView 完全忽略 @supports 块，只有外层 CSS 才生效。所以降级方案不能藏在里面，而要提前写好、确保所有浏览器都能执行：
- 优先用
display: flex+flex-wrap: wrap模拟二维网格，但需显式重置干扰属性：align-items: stretch、flex-basis: auto - 若 flex 在某些安卓机上滚动卡顿，改用
display: block+float: left，并配合min-width: 0防止缩放错位 - 所有降级规则的选择器权重需与 Grid 规则一致（比如都用
.grid），避免新浏览器加载 Grid 后旧规则残留影响布局
gap 和 fr 单位必须手动 fallback
gap 在 Safari ≤14.0、IE、旧 Android WebView 中不被识别；fr 在 IE11、Safari 9–10.1 中会导致整条 grid-template-columns 被丢弃。它们没有自动等价替代，只能人工处理：
-
gap 替代方案：给每个网格项加
margin-right和margin-bottom，再用:nth-child清除末尾项。例如三列布局：.item { margin-right: 12px; margin-bottom: 12px; }+.item:nth-child(3n) { margin-right: 0; }+.item:nth-last-child(-n+3) { margin-bottom: 0; } -
fr 替代方案：不用百分比硬写
50% 50%，改用calc(100% / 3) calc(100% / 3) calc(100% / 3)，并确保父容器有明确宽度（不能是auto或fit-content） - ⚠️ 注意：
grid-row-gap和grid-column-gap虽兼容性稍好，但在 Safari 10.1 中仍不生效，且 autoprefixer 默认不转换，不可依赖
特殊场景要单独处理
有些 Grid 特性在降级时无法靠简单替换解决，需针对性补救：
-
grid-template-areas：Safari ≤10.1 和 iOS ≤14 完全不支持，写了会导致整个 Grid 声明失效。必须移除，改用数字线定位，如
grid-column: 1 / -1; grid-row: 1; -
subgrid：无 polyfill，降级时子元素需手动写死
grid-row: 1 / 4这类范围，不能指望浏览器推导 -
JS 检测兜底：@supports 在 Android 4.4 中也不被识别，建议 UA 字符串匹配 + 临时元素探测双保险，匹配成功后加
.no-grid类触发内联降级样式
