subgrid 真正启用需用 getcomputedstyle 运行时验证 gridtemplatecolumns 是否严格等于 "subgrid"；@supports 检测不可靠，firefox 111–113 存在误判，chrome 114 及更早版本直接跳过规则。
直接用 @supports (grid-template-columns: subgrid) 会误判
这个写法在 Firefox 111–113 中存在已知 bug：即使 layout.css.grid-2 被禁用，@supports 仍可能返回 true；Chrome 114 及更早版本甚至根本不识别该语法，整条 @supports 规则被跳过。它不是“不准”，而是部分浏览器压根不进解析流程。
真实生效必须靠 getComputedStyle 运行时验证
唯一可靠方式是 JS 检测元素实际计算值是否严格等于 "subgrid"：
const el = document.querySelector('.child-grid');
const computed = getComputedStyle(el);
if (computed.gridTemplateColumns === 'subgrid') {
// subgrid 真正启用
} else {
// 退回显式列定义，如 grid-template-columns: 120px 1fr
}
-
gridTemplateColumns返回空字符串、"none"或其他值 → Level 2 未启用或浏览器不支持 - 别信 DevTools 的「Computed」面板——它对无效
subgrid不提示，可能显示继承值或空白 - Firefox 还需确认
about:config中layout.css.grid-2和layout.css.grid-template-subgrid-value.enabled均为true，且已完全重启浏览器
降级样式不能全塞进 @supports 块里
旧版 Firefox（≤110）和 Safari 16 及更早版本不识别 @supports (grid-template-columns: subgrid)，会直接跳过整个规则块，导致无任何 fallback。
- 基础 Grid 布局用
@supports (display: grid) and (grid-template-columns: 1fr)包裹（兼容性更稳） - subgrid 专用样式单独写，降级规则放在
@supports外层，确保所有浏览器都能执行到 - 若父列数是
repeat(auto-fit, minmax(200px, 1fr)))，fallback 中必须转为固定列数（如repeat(3, 1fr)），否则孙子层无法对齐
grid-column: subgrid 比 grid-template-columns: subgrid 更易降级
前者只要子元素是父网格的直系网格项（即已用 grid-column 或 grid-area 定位），就能复用父列轨道；后者要求子元素自身是网格容器且父容器明确定义了轨道，条件更苛刻。
- 推荐结构：
.parent { display: grid; grid-template-columns: 120px 1fr; }+.child { grid-column: 1 / -1; }+.grandchild { grid-column: subgrid; } - 不支持时，
.grandchild退化为块级流，所以降级必须覆盖到这一层：给.child设display: grid并复制列定义，再手动写grid-column: 1或grid-column: 2 - 用 CSS 变量统一列定义（如
--cols: 120px 1fr），避免硬编码重复
display: contents，轨道不能动态推导，且所有参与层（父、子、孙）都得同步适配降级路径。漏掉一层，布局就错位。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
