grid-template-rows: subgrid没效果是因为浏览器静默丢弃该声明（计算值为none），必须同时满足：父容器显式定义grid-template-rows、子元素为真实直系DOM子项、子元素设display: grid且grid-row: span N（N=父轨道行数）。

为什么 grid-template-rows: subgrid 没效果？

不是语法写错，是浏览器压根没让它生效——subgrid 声明被静默丢弃后，计算值显示为 none，子元素退化成普通块级流。

必须同时满足三个硬性条件：

• 父容器显式定义 grid-template-rows（如 auto 1fr auto 或 repeat(3, minmax(0, 1fr)))），不能只靠 grid-auto-rows 或 repeat(auto-fit, ...)
• subgrid 元素必须是父网格的**真实 DOM 直系子项**，中间不能有 display: contents、fieldset、或任何仅用于包裹的
• 子元素自身要设 display: grid，且必须配合 grid-row: span N（N = 父轨道总行数）或 grid-row: 1 / -1，否则只占单行，孙辈定位全乱

如何让孙子级元素对齐顶层网格线？

Subgrid 不穿透两层。.list → .card → .content 这种结构里，.content 对齐的是 .card 的轨道，不是 .list 的。

想让 .content 直接锚定顶层列线或行线，中间层 .card 必须也启用 subgrid，并清除干扰：

• .card 同时声明 grid-template-columns: subgrid 和 grid-template-rows: subgrid
• .card 禁用 gap、grid-auto-rows、grid-auto-columns
• .card 不能有空子节点或语义包裹层（比如
  或 包着 .content）
• .content 内部元素可直接用 grid-column: 2 或 grid-row: 3，它现在看到的就是 .list 的原始轨道编号

subgrid 能和 grid-template-areas 一起用吗？

不能。区域命名（grid-template-areas）不穿透层级，孙子元素无法参与父级区域映射。

例如外层定义了 "header header" "nav main"，内层容器即使写了 grid-area: main，它的子元素也不会自动落入 main 区域内部。


CSS工具箱(专业版)
全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。
下载

替代方案是放弃区域系统，改用轨道继承：

• 外层用 grid-template-columns: [nav] 250px [main] 1fr 定义命名线
• 中间层设 grid-template-columns: subgrid 并 grid-column: main / -1
• 孙子元素直接用 grid-column: nav 或 grid-column: main 锚定顶层命名线

响应式断点下 subgrid 失效怎么办？

Subgrid 继承链在媒体查询中极其脆弱：只要父容器或子元素任一方在断点里重写 grid-template-columns 或改用 auto-fit，继承就中断。

安全做法只有一条：所有轨道定义集中到最外层容器，子元素不参与响应式重定义：

• ✅ 正确：@media (min-width: 768px) { .list { grid-template-columns: 1fr 2fr 1fr; } }
• ❌ 错误：@media (min-width: 768px) { .card { grid-template-columns: subgrid; } } —— 这行声明本身无意义，subgrid 不是响应式开关
• ❌ 更危险：@media (min-width: 768px) { .card { grid-template-columns: 1fr 1fr; } } —— 主动覆盖继承，subgrid 彻底失效

真正容易被忽略的是：Chrome/Firefox 的 Grid Inspector 中勾选 “Show line names”，能一眼看出当前元素看到的列线名来自哪一层——这是调试 subgrid 是否穿透成功的最快方式。