CSSSubgrid兼容性及解决方法

CSS subgrid 是一项强大的网格布局增强特性，但其浏览器兼容性存在显著断层：仅 Chrome 115+、Firefox 111+ 和 Safari 17.4+ 原生支持，而所有旧版 Edge、iOS Safari 16 及更早版本完全不识别 `subgrid` 值，甚至跳过解析，导致布局彻底错乱——这不是样式失效，而是 CSS 引擎根本“看不见”它；本文直击痛点，详解如何通过 `@supports` 精准检测、分层声明规则、手动匹配轨道、规避 `display: contents` 等陷阱，提供真正可行的零 JavaScript 降级方案，并犀利指出 Flexbox 回退的局限性与常见误区，帮你避开兼容性雷区，在现代与旧环境间稳稳落地 subgrid 的语义价值。

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>/</p>

为什么加了 display: contents 后 subgrid 更容易崩

display: contents 会让元素自身不出现在渲染树中，但它的子元素仍参与网格布局——这和 subgrid 要求“子元素需继承父网格轨道定义”的前提冲突。一旦父容器用了 display: contents，其子元素就找不到上层 grid-template-rows 的来源，subgrid 直接失效。

常见于自定义组件封装场景，比如把