subgrid 仅 Firefox 稳定支持，Chrome/Safari 尚未支持；其生效前提为父容器是显式定义 grid-template 的 grid 容器，且子元素必须是直接子元素，不能混用 subgrid 与具体尺寸，也不支持隐式轨道或多层嵌套。
目前主流浏览器中，subgrid 尚未被 Chrome 和 Safari 支持（截至 2024 年中），Firefox 是唯一稳定支持 subgrid 的桌面浏览器，且仅支持在 grid-template-rows 或 grid-template-columns 中显式声明为 subgrid，不支持隐式轨道或跨多层嵌套子网格。
为什么 display: subgrid 会失效
最常见的现象是：给子元素设置 display: subgrid 后布局完全没变化，甚至报错或被忽略。根本原因是——该元素的父容器不是 Grid 容器，或未启用显式网格轨道定义。
-
subgrid只能用于已处于父级display: grid上下文中的直接子元素 - 父容器必须用
grid-template-rows/grid-template-columns显式定义了轨道（不能只靠grid-auto-rows） - 若父容器使用
grid-template-areas，子元素仍需在对应区域中，并显式声明subgrid轨道方向 - Firefox 中若父容器用了
gap，子subgrid会继承该 gap；但 Chrome 会直接跳过整个声明
subgrid 必须配合显式 grid-template 使用
以下写法在 Firefox 中有效，在 Chrome/Safari 中会被静默忽略：
.parent {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto 100px;
}
<p>.child {
display: grid;
grid-column: 1 / -1;
grid-row: 1;
/<em> ✅ 正确：沿用父行轨道 </em>/
grid-template-rows: subgrid;
/<em> ❌ 错误：不能写成 grid-template-rows: subgrid / subgrid </em>/
grid-template-columns: 1fr; /<em> subgrid 不接管列，所以仍需定义列 </em>/
}</p>
注意：subgrid 是单向继承，不能同时指定行列都为 subgrid（除非父容器两方向都显式定义了轨道）；也**不能**混用 subgrid 和具体尺寸，比如 grid-template-rows: subgrid 50px 是无效的。
替代方案：不用 subgrid 怎么对齐嵌套网格
当需要兼容 Chrome/Safari 时，实际项目中更可靠的做法是“提升网格作用域”，即把本想设为 subgrid 的内容，直接放在父 grid 容器内布局。
- 用
grid-area或grid-column/grid-row控制子内容位置，而非嵌套新 grid - 若必须封装组件，可用
display: contents让容器不产生盒子，使子元素直接受父 grid 管理（注意可访问性影响） - CSS 自定义属性 +
calc()模拟对齐（如复用--col-width计算内层宽度），但无法响应轨道动态变化 - JavaScript 监听
ResizeObserver手动同步尺寸——仅适用于简单场景，维护成本高
真正要用 subgrid，得先确认目标用户是否集中在 Firefox，或者你愿意承担降级后布局偏移的风险；否则，它现在更多是个“未来就绪”的标记，而不是可落地的布局工具。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
