subgrid在老旧移动端浏览器中完全不被解析，chrome 115前、safari 17.4前及所有ios safari≤16均未实现该规范，整条声明被静默丢弃；@supports检测不可靠，需用getcomputedstyle验证；display: contents会中断subgrid链；父容器必须显式定义grid-template-rows/columns，且子元素须显式定位。
Subgrid 在老旧移动端浏览器里根本不会被解析，不是“不生效”，而是 CSS 引擎直接跳过整条声明。
Chrome 115 之前、Safari 17.4 之前、所有 iOS Safari ≤16 都不认识 subgrid
这些浏览器的渲染引擎（Blink ≤114 / WebKit ≤16.3）压根没实现 Subgrid 规范。你写 grid-template-rows: subgrid，它们连关键字都识别不了，更不会尝试降级或报错——整条规则被静默丢弃。用 getComputedStyle(el).gridTemplateRows 查，返回的是空字符串或初始值 none，而不是 "subgrid"。
特别注意：iOS Safari 16.4 才开始实验性支持 subgrid，但仅限列方向；行方向仍无效。所以写 grid-template-rows: subgrid 在绝大多数 iOS 设备上等于没写。
@supports 检测在旧 WebView 和 Safari 中不可靠
旧 Android WebView（如 Chromium 85 及更早）和 Safari 15.6–16.3 会错误地通过 @supports (grid-template-rows: subgrid)，但它其实根本不支持。这不是检测逻辑问题，是引擎解析层缺失导致的误判。
- 真正可用的检测方式是 JS 运行时验证：
getComputedStyle(el).gridTemplateRows === 'subgrid' - 别把降级样式包在
@supports里面——旧浏览器看不到它，直接跳过整块 CSS - 必须把 fallback 规则写在
@supports外部，确保所有环境都能读到
display: contents 会让 subgrid 彻底失效
如果你在父网格容器和子元素之间加了一层 display: contents 的 wrapper（比如自定义组件封装场景），subgrid 就会断链。因为 display: contents 把 wrapper 从渲染树中移除，它的子元素就找不到上层定义的 grid-template-rows 轨道来源。
检查 DOM 层级：确保启用 subgrid 的元素的**直接父元素**就是那个设置了 grid-template-rows 或 grid-template-columns 的容器。中间不能插任何 display: contents、display: none 或非 grid 容器。
父容器没显式定义轨道，subgrid 就没有继承对象
Subgrid 不继承 grid-auto-rows、不响应 gap 插入的隐式行、也不认 repeat(auto-fit, ...) 这类动态生成的轨道。它只认你亲手写的 grid-template-rows: 40px 1fr 60px 这种明确值。
常见失效写法：
- 父容器只写了
display: grid; gap: 12px;—— 没轨道，subgrid直接被忽略 - 用了
grid-template-rows: repeat(3, minmax(60px, 1fr))—— 看似明确，但部分旧 Safari 会把它当隐式处理 - 子元素没用
grid-row或grid-area显式定位 —— 它甚至不算网格项，subgrid根本不启动
最稳妥的做法：父容器用固定轨道定义（如 40px 1fr 60px），子元素用 grid-row: 1 / -1 占满，再在其子代（孙子级）上设 grid-row: subgrid —— 这是目前兼容性最好的落地路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
