Chrome 115+、Firefox 111+ 和 Safari 17.4+ 支持 subgrid，更早版本（含所有旧版 Edge 及 iOS Safari 16 及之前）完全不识别该值，解析时直接跳过，导致布局错乱。
subgrid 在哪些浏览器里根本不起作用
Chrome 115+、Firefox 111+ 和 Safari 17.4+ 才支持 subgrid，更早版本（包括所有 Edge 旧版、绝大多数 iOS Safari 16 及之前）会直接忽略 grid-template-rows: subgrid 这类声明，降级为 grid-template-rows: none 的行为——也就是子网格项不再对齐父网格线，布局完全错乱。
这不是“样式没生效”，而是 CSS 引擎压根不识别该值，连解析都跳过。你用 getComputedStyle 查 gridTemplateRows，返回的会是空字符串或初始值，不是 "subgrid"。
不用 JavaScript 怎么让 subgrid 降级成普通 grid
核心思路是：用 @supports 区分支持与不支持的环境，只在支持时启用 subgrid 布局；不支持时，改用显式定义的 grid-row/grid-column 或复制父网格轨道定义。
- 别在同一个选择器里混写
grid-template-rows: subgrid和grid-template-rows: 1fr 2fr——@supports外层必须包裹整套规则 - 父容器需有明确的
grid-template-rows（不能是auto-fit动态生成的），否则子元素即使支持subgrid也无轨可依 - 降级方案中，子元素的
grid-row必须手动匹配父容器轨道数，例如父设了grid-template-rows: 40px 1fr 60px，子就得写grid-row: 1 / 4覆盖全部
/* 支持 subgrid 的情况 */
@supports (grid-template-rows: subgrid) {
.parent { grid-template-rows: 40px 1fr 60px; }
.child { grid-row: span 3; grid-template-rows: subgrid; }
}
<p>/<em> 不支持时回退 </em>/
.parent { grid-template-rows: 40px 1fr 60px; }
.child { grid-row: 1 / 4; } /<em> 手动覆盖三行，不依赖 subgrid </em>/为什么加了 display: contents 后 subgrid 更容易崩
display: contents 会让元素自身不出现在渲染树中，但它的子元素仍参与网格布局——这和 subgrid 要求“子元素需继承父网格轨道定义”的前提冲突。一旦父容器用了 display: contents，其子元素就找不到上层 grid-template-rows 的来源，subgrid 直接失效。
立即学习“前端免费学习笔记（深入）”；
常见于自定义组件封装场景，比如把 <section class="grid-parent"> 内部套了一层 <div class="wrapper" style="display: contents">，此时 .wrapper 的子元素已脱离原始网格上下文。
- 检查 DOM 结构层级，确保
subgrid元素的**直接父元素**就是定义了grid-template-rows/columns的容器 - 避免在 subgrid 链路上插入
display: contents或display: grid的中间层 - 若必须抽象 wrapper，改用
grid-area+ 显式定位，而非依赖 subgrid 对齐
Flexbox 回退方案比 Grid 回退更稳吗
不一定。Flexbox 本身没有“轨道对齐”概念，无法模拟 subgrid 的跨层级对齐能力。如果你依赖的是行高一致性（比如表头与数据行单元格高度自动对齐），Flexbox 回退后必须用 align-items: stretch + 统一 min-height，但遇到内容换行、字体差异时依然容易错位。
真正可靠的降级路径只有两条：
- 接受视觉妥协：放弃跨行对齐，用 padding/margin 控制间距，靠 JS 测量同步高度（仅限小范围）
- 彻底放弃 subgrid 语义，改用传统 grid 布局：父容器定义完整轨道，所有子元素用
grid-row精确指定起止线，不依赖 subgrid 自动继承
最后提醒一句：subgrid 的兼容性断层不是渐进式的，它要么全有，要么全无。别指望加个 fallback: grid 属性——CSS 里根本没有这种东西。
