Chrome 115+、Firefox 111+ 和 Safari 17.4+ 是唯一完全支持 subgrid 的主流浏览器；更早版本均不识别该值，解析时直接跳过整条声明。
Chrome 115+、Firefox 111+ 和 Safari 17.4+ 是当前唯一能**完全支持** subgrid 的主流浏览器版本；所有更早版本（包括 Chrome 114 及以前、Firefox 110 及以前、Safari 17.3 及以前，以及全部 iOS Safari 16 及更早）均不识别该值，解析时直接跳过整条声明。
@supports (grid-template-rows: subgrid) 在 Firefox 中不可靠
Firefox 111–113 存在已知 bug：@supports (grid-template-rows: subgrid) 可能错误返回 true，即使 layout.css.grid-2 或 layout.css.grid-template-subgrid-value.enabled 任一开关为 false。仅靠该检测无法确认实际生效。
- 真实验证必须用 JavaScript：调用
getComputedStyle(el).gridTemplateRows，若返回空字符串或"none"，说明subgrid未激活 - Firefox 必须完全重启（关闭所有窗口后重开），否则新配置的
about:config开关不会生效 - DevTools 的「Computed」面板对无效
subgrid不做提示，容易误判——应结合「Layout」→「Grid overlay」观察子元素是否真正贴合父网格线
subgrid 生效的前提比文档写的更严格
不是写了 grid-template-columns: subgrid 就能用。它要求：
- 父容器必须是
display: grid，且显式定义grid-template-columns（不能依赖grid-auto-columns或auto-fit动态推导） -
subgrid只作用于**直系子元素**，且该子元素本身必须已是父网格中的一个被定位的网格项（例如通过grid-column或grid-area显式指定位置） - 若父容器用了
display: contents，其子元素将脱离原始网格上下文，subgrid直接失效——因为“父网格轨道”这个源头已不存在
降级方案必须覆盖到孙子层级
当 subgrid 不可用时，常见错误是只给父容器加列定义，却忘了子元素内部的字段（如 label 和 input）需要手动对齐。
- 正确 fallback：把子元素设为
display: grid，并复用父容器的grid-template-columns值（推荐用 CSS 变量统一，如--cols: 120px 1fr） - 子元素的每个直系子代（即孙子元素）必须显式写
grid-column: 1、grid-column: 2等，不能指望自动分配 - 若父列数是动态的（如
repeat(auto-fit, minmax(200px, 1fr)))），fallback 中必须转为固定列数（如repeat(3, 1fr)），否则无法对齐
真正麻烦的不是“怎么写 subgrid”，而是“怎么让没它的时候也不崩”。很多布局塌陷，根源不在子元素没设 display: grid，而在降级路径里漏掉了对孙子元素的 grid-column 显式控制——这一层最容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
