ios safari 16+ 和 android webview（chrome 72+）已稳定支持 grid 基础特性，但需规避 subgrid、grid-area 命名线及 grid-auto-flow: column；老 android webview（4.4 及更早）和微信 x5 内核 v6.x 前不支持 grid，应通过 @supports 检测降级 flexbox。
移动端 Grid 布局在 iOS Safari 16 及更早、Android WebView 浏览器压根不解析 grid-template-columns 这类声明——@supports 是唯一可靠且零 JS 的分流手段。
为什么 @supports (display: grid) 是起点，但还不够稳
只写 @supports (display: grid) 会让 Safari 10.1、iOS Safari 15.6 这类“半支持”浏览器误入 Grid 分支：它们认 display: grid，但不支持 gap、subgrid 或 fr 单位，结果布局塌陷。
- 必须加约束条件，推荐用
@supports (display: grid) and (grid-template-columns: 1fr)—— 同时验证 display 和核心模板语法，能准确筛掉 Safari ≤10.1、所有 IE、以及大部分 Android 旧 WebView - 别写
@supports (grid-gap: 1rem)：Firefox 63 以前不支持，反而把大量现代浏览器拦在外面 - IE11 完全忽略
@supports块，所以降级样式必须写在块外，且语法得是它能理解的（比如用margin代替gap）
降级方案必须避开 Flex 与 Grid 的隐式冲突
很多项目先写 .grid { display: flex }，再用 @supports 覆盖成 display: grid，这在 iOS Safari 15.4 等中间版本里会导致 Flex 规则残留，子项高度/换行异常。
- 降级应优先选
display: block+float: left或inline-block，避免和 Grid 的二维逻辑耦合 - 若用 Flex 降级，务必显式重置所有可能干扰的属性：
flex-wrap: wrap、flex-basis、align-items都得在@supports外统一设为初始值 - 移动端要注意
float在 viewport 缩放后可能触发重排错位，建议配合min-width: 0防止内容溢出
subgrid 降级不能靠复制父轨道值自动推导
当父容器用 grid-template-rows: 40px 1fr 60px，子元素启用了 grid-template-rows: subgrid，在不支持的浏览器里，@supports 外的降级必须手动写死范围，不能指望浏览器“猜”。
- 子元素得明确写
grid-row: 1 / 4（覆盖全部三行），否则默认只占一行，布局断裂 - 父容器的
grid-template-rows必须是静态定义（不能是auto-fit或minmax()动态生成），否则降级时无法对齐轨道数 - 禁用
display: contents在 subgrid 链路上的任何位置——它会让子元素脱离网格上下文，@supports也救不了
真正麻烦的不是写两套样式，而是 subgrid 和 gap 这类特性在降级时没有等价替代；@supports 只负责分流，轨道对齐、间隙控制、跨行逻辑都得靠人工对齐，稍有偏差就会在 iOS 15.6 这类“灰度兼容”设备上暴露出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
