必须用@supports检测subgrid并手动模拟轨道：chrome 117+/firefox 71+/safari 16+原生支持，但safari 15.6等版本静默忽略subgrid导致布局断裂；@supports需明确检测grid-template-rows: subgrid等值，不可仅检测display: grid，fallback须用css变量或固定单位复刻父轨道，禁用display: contents。
不能直接用 subgrid 回退，必须用 @supports + 手动轨道模拟双轨策略。现代浏览器（Chrome 117+、Firefox 71+、Safari 16+）已原生支持 subgrid，但 Safari 15.6 或 Chrome 116 等“准现代”版本仍不支持——它们不会报错，而是静默忽略 grid-template-rows: subgrid，导致子网格塌缩成单行或错位。这不是兼容性“降级”，而是布局逻辑断裂。
为什么 @supports (display: grid) 不够用？
因为 subgrid 是 Grid Level 2 的独立特性，支持 Grid 并不等于支持 subgrid。只检测 display: grid 会让 Safari 15.6 这类浏览器误入 subgrid 分支，结果样式失效却无提示。
- 正确检测方式是
@supports (grid-template-rows: subgrid)或@supports (grid-template-columns: subgrid) - 不要用
@supports not (...)写 fallback，CSS 解析器遇到不支持的值会跳过整条规则，fallback 可能被完全跳过 - 若需同时检测行列，写两个独立
@supports块，避免逻辑耦合
手动模拟 subgrid 轨道的三种可行路径
当 @supports 判定不支持时，你得用静态方式“复刻”父网格轨道。这不是等比例缩放，而是根据父容器实际轨道尺寸反向推导子项布局。
- 若父网格用固定单位（如
grid-template-rows: 40px 1fr 60px），子项用grid-row: 1 / 4+height: 100%拉满，再内部用display: flex; flex-direction: column分段对齐 - 若父网格含
fr或minmax()（如grid-template-rows: auto 1fr auto），必须用 CSS 变量传递计算后尺寸：--row-1: 48px; --row-2: calc(100% - 96px); --row-3: 48px;，子项用grid-template-rows: var(--row-1) var(--row-2) var(--row-3) - 绝对禁止在 fallback 中用
display: contents——它会让子元素脱离父网格上下文，导致grid-row定位失效，且无法与父轨道对齐
最易踩坑的 DOM 层级陷阱
即使代码写对了，subgrid 也会在以下 DOM 结构中彻底失效：
- 父容器是
grid，但中间插了一层div且设了display: contents→ 子网格元素的“直接父元素”不再是 grid 容器，subgrid失效 - 父容器用了
grid-template-areas，但子元素没用grid-area显式声明位置 → 浏览器无法确定其占据哪几行/列，subgrid不触发 - 子元素设置了
grid-row: span 2，但父网格只有 1 行定义 →subgrid要求跨越的行数 ≤ 父网格定义的行数，否则退化为普通 grid
真正难的不是写对 subgrid，而是在 fallback 里保持视觉一致性：父网格用 gap: 1.5rem，子网格 fallback 就得用 padding 或 margin 精确还原；父网格行高随内容伸缩，fallback 就得靠 aspect-ratio 或 min-height 配合 JS 微调。这些细节一旦漏掉，用户在旧版 Safari 上看到的就是错位卡片和断掉的分割线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
