subgrid仅在chrome 115+、firefox 111+、safari 17.4+可用，旧版浏览器静默忽略声明导致布局错乱；其生效需父容器显式定义grid-template-columns且子元素为直系网格项，否则计算值为none；推荐用grid-column: subgrid替代grid-template-columns: subgrid，并配合css变量统一轨道定义与手动fallback。
subgrid 在 Chrome 115+、Firefox 111+、Safari 17.4+ 才真正可用，旧版本（包括所有 iOS Safari 16 及更早）会静默跳过声明，不是“没效果”，而是 CSS 引擎压根不解析——布局直接错乱。
为什么 grid-template-columns: subgrid 总是失效
这个写法要求子元素本身是网格容器，且父容器必须显式定义 grid-template-columns（不能靠 grid-auto-columns 或 repeat(auto-fit, ...) 推导）。一旦父容器只写了 display: grid 却没设轨道，DevTools 里 gridTemplateColumns 的计算值就是 none，subgrid 就不会生效。
- 常见错误：用
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))当作父列定义 → 子元素无法继承稳定列线 - 验证方式：打开 Chrome DevTools Layout 面板，勾选 “Show line names”，看是否有实线轨道被标出
- 安全写法：父容器用
grid-template-columns: [label] max-content [input] 1fr或固定值如120px 1fr
grid-column: subgrid 比 grid-template-columns: subgrid 更可靠
后者要求子元素是网格容器；前者只要子元素是父网格的直系网格项（即已通过 grid-column 或 grid-area 被定位），就能复用父列轨道。这是目前兼容性最好、落地最稳的写法。
- 必须步骤：父容器设
display: grid+ 显式grid-template-columns - 子元素先用
grid-column: 1 / -1占满整行，成为网格项 - 再对其直系子代（孙子元素）设
grid-column: subgrid - 注意：
display: contents会让子元素脱离渲染树，导致subgrid彻底失效——检查 DOM 层级，确保子元素的**直接父元素**就是定义了轨道的那个容器
@supports 检测不可信，必须搭配 JS 验证
@supports (grid-template-columns: subgrid) 在 Firefox 111–113 中存在 bug：即使 layout.css.grid-2 被禁用，也会错误返回 true。仅靠 CSS 检测无法判断 subgrid 是否真启用。
- 真实检测方式：
getComputedStyle(el).gridTemplateColumns返回空字符串或"none"→ 说明未激活 - Firefox 还需确认两个 about:config 开关：
layout.css.grid-2和layout.css.grid-template-subgrid-value.enabled都为true，且**完全重启浏览器** - @supports 块外层必须写降级样式：IE11 和旧 Safari 会跳过整个 @supports 块，只有外层规则能生效
- 别嵌套
@supports (gap: 1rem)：Safari 10.1 不支持该语法，整块被忽略
手动 fallback 必须覆盖到孙子层级
当 subgrid 失效时，孙子元素会退化为块级流，布局塌陷。降级不能只改父容器，必须让孙子元素也参与同一套轨道对齐。
- 错误做法：只给子元素加
display: grid和grid-template-columns: 120px 1fr，却不给其子代设grid-column - 正确 fallback：
.child { display: grid; grid-template-columns: var(--form-cols); }+ 每个孙子显式写grid-column: 1或grid-column: 2 - 动态列数（如
repeat(auto-fit, ...)）在 fallback 中必须转为固定列数（如repeat(3, 1fr)），否则无法对齐 - 用 CSS 变量统一列定义：
--form-cols: 120px 1fr，父/子都引用grid-template-columns: var(--form-cols)，避免硬编码重复
真正麻烦的不是怎么写 subgrid，而是怎么让它在不支持的环境里不崩——所有降级路径都得从孙子元素开始推演，稍一遗漏，表单字段就错位、卡片就堆叠。别依赖 DevTools 的 “Computed” 面板判断是否生效，一定要开 Grid overlay 看红色 outline 是否贴合父网格线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
