subgrid 必须显式声明且仅作用于直系子元素，父容器需明确定义轨道，Chrome 115+/Firefox 111+/Safari 17.4+ 支持，旧版浏览器需用 @supports 检测并手动 fallback 到显式网格定义。
Firefox 支持 subgrid，但 Chrome 和 Safari 需要 115+/17.4+ 才能用
Chrome 115 之前、Safari 17.4 之前（包括所有 iOS Safari 16 及更早版本）压根不识别 grid-template-columns: subgrid 或 grid-row: subgrid ——不是“没效果”，而是 CSS 引擎直接跳过整条声明，getComputedStyle 返回空字符串或初始值。这意味着你不能只靠 @supports (grid-template-columns: subgrid) 包一层就完事，必须提供可运行的降级路径。
别写 grid-template-columns: subgrid，改用 grid-column: subgrid + 显式占位
Subgrid 的实际生效条件比文档写的更苛刻：grid-template-columns: subgrid 要求子元素本身是网格容器且父容器已定义列轨道；而 grid-column: subgrid 更宽松，只要子元素是父网格的**直系网格项**（即已通过 grid-column 或 grid-area 被定位），就能复用父列轨道。这是目前最稳定、兼容性最好的写法：
- 父容器必须设
display: grid且显式定义grid-template-columns（不能靠grid-auto-columns推导） - 子元素先用
grid-column: 1 / -1或grid-area占满整行，成为网格项 - 再对子元素的直系子代（即孙子元素）设
grid-column: subgrid - 不支持时，这些孙子元素会退化为块级流，布局塌陷——所以降级必须覆盖到这一层
手动 fallback：复制父列定义 + grid-column 精确对齐
当 @supports 检测失败时，不能只给父容器加列定义，还要让子元素内部的字段按相同轨道对齐。常见错误是只写 .child { grid-template-columns: 120px 1fr; }，却忘了子元素自身不是网格容器，它的子代不会自动参与该网格。
正确 fallback 方式：
立即学习“前端免费学习笔记（深入）”；
- 把子元素设为
display: grid，并重复父容器的grid-template-columns值（如120px 1fr） - 子元素的每个直系子代（label/input）显式写
grid-column: 1或grid-column: 2，而非依赖 subgrid 自动分配 - 如果父列数动态（如
repeat(auto-fit, minmax(200px, 1fr)))），fallback 里必须用固定列数（如repeat(3, 1fr)），否则无法对齐 - 用 CSS 变量统一列定义，避免硬编码重复：
--form-cols: 120px 1fr;，父/子都引用grid-template-columns: var(--form-cols)
为什么 display: contents 会让 subgrid 彻底失效
在组件封装中，常有人给 wrapper 加 display: contents 想让它不占渲染空间，但此举会让 wrapper 的子元素脱离原始网格上下文——它们的父节点不再是定义了 grid-template-columns 的容器，而是更上层的 DOM 节点。此时 grid-column: subgrid 查不到任何轨道来源，浏览器静默忽略。
排查方法很简单：打开 DevTools → Elements 面板，确认 subgrid 元素的**直接父元素**是否同时满足两个条件：display: grid 和显式 grid-template-columns。中间插了 display: contents、display: none 或 position: absolute 的节点，都会切断继承链。
