Chrome 115+ 和 Safari 17.4+ 才真正支持 subgrid，旧版浏览器直接跳过声明；@supports 检测不可靠，需用 getComputedStyle(el).gridTemplateColumns === 'subgrid' 真实验证；grid-column: subgrid 兼容性优于 grid-template-columns: subgrid。
Chrome 115+ 和 Safari 17.4+ 才真正支持 subgrid，旧版 Chrome、所有 iOS Safari 16 及更早版本、Edge 113– 都不识别该值——不是“没对齐”，而是 CSS 引擎直接跳过整条声明，getComputedStyle 返回空字符串或初始值。
为什么 @supports (grid-template-columns: subgrid) 不可靠
Firefox 111–113 存在已知 bug：@supports 会错误返回 true，即使 layout.css.grid-2 被禁用；Chrome 114 之前、Safari 17.4 之前压根不解析该语法，@supports 块会被整个忽略，导致降级样式完全不生效。
- 别把所有 fallback 都塞进
@supports块里——必须在外层写独立的、IE/Safari 10.1 都能理解的基础样式 - 真实检测要靠 JS：
getComputedStyle(el).gridTemplateColumns === 'subgrid'才算真启用（注意：返回空字符串即失败） - 验证时打开 DevTools → Layout 面板 → 勾选 Grid overlay，看子元素 outline 是否严格贴合父网格线
grid-column: subgrid 比 grid-template-columns: subgrid 更稳
grid-template-columns: subgrid 要求子元素自身是网格容器且父容器明确定义列轨道；而 grid-column: subgrid 只要求子元素是父网格的**直系网格项**（即已通过 grid-column 或 grid-area 定位），兼容性更好、生效条件更宽松。
- 父容器必须设
display: grid且显式定义grid-template-columns（不能靠auto-fit推导） - 子元素先用
grid-column: 1 / -1占满整行，成为网格项 - 再对其直系子代（孙子元素）设
grid-column: subgrid - 不支持时，这些孙子元素退化为块级流——所以降级必须覆盖到这一层，不能只改父容器
手动 fallback 必须复制轨道 + 显式定位
当 @supports 失效，不能只给父容器加列定义，还要让子元素内部字段按相同轨道对齐。常见错误是只写 .child { grid-template-columns: 120px 1fr; }，却忘了子元素自身不是网格容器，它的子代不会自动参与该网格。
- 正确 fallback：
.child { display: grid; grid-template-columns: var(--form-cols); }（复用同一 CSS 变量） - 每个直系子代（如
label、input）必须显式写grid-column: 1或grid-column: 2，不能依赖自动分配 - 若父列数动态（如
repeat(auto-fit, minmax(200px, 1fr)))），fallback 中必须用固定列数（如repeat(3, 1fr)），否则无法对齐 - 禁用
display: contents在 subgrid 链路上的任何位置——它会让子元素脱离原始网格上下文，@supports也救不了
真正麻烦的不是写两套样式，而是 subgrid 和 gap 这类特性在降级时缺乏自动推导能力：父容器轨道数、子元素占位范围、孙子元素列索引，全得手动对齐，漏一个就错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
