grid-template-rows: subgrid未生效的根本原因是父容器未显式定义grid-template-rows且子元素非直接子项；必须满足父设display: grid并显式声明行轨道、子为直接子元素且自身display: grid，缺一不可。
grid-template-rows: subgrid 为什么没生效
写了 grid-template-rows: subgrid 却完全没对齐，大概率不是语法错，而是浏览器直接忽略了这条声明。它被静默丢弃的常见原因有：
- 父容器只设了
display: grid和gap，但没写任何grid-template-rows—— 没有显式轨道，就无“子”可继 - 父容器用的是
grid-auto-rows: 100px或repeat(auto-fit, ...)这类隐式轨道定义，subgrid不认 - 子元素被包在
display: contents容器里，DOM 层级上已不是父网格的直接子项 - 开发者工具里检查 computed 样式，发现
grid-template-rows解析为none，说明整条声明已被丢弃
嵌套 Grid 容器自身怎么在父网格中居中
很多人以为给父容器设 align-items: center 就能让子 Grid 居中，其实不起作用——关键在子容器自己怎么“摆”：
- 必须在子 Grid 元素上写
align-self: center或justify-self: center，而不是只靠父级设置 - 如果父网格对应轨道是
grid-template-rows: auto，align-self: center可能无视觉效果，因为轨道没“高度空间”可居中 - 解决方案：要么给该轨道设固定高（如
100px），要么确保父容器有明确高度（如height: 100vh），或改用align-content: center（仅对多行轨道有效） - 切勿在同一个元素上同时写
margin: auto和justify-self: end—— 前者会直接忽略后者
子项内部拉伸失败的真正原因
align-items: stretch 看起来没用，其实是子项在“拒绝拉伸”。它对以下情况完全失效：
- 子项设置了
height、max-height、min-height或align-self - 子项内部是
display: flex，但没设height: 100%或min-height: 0，导致 flex item 默认最小高度阻止 shrink - 图片没加
height: 100%+object-fit: cover，撑破单元格 - 用了
grid-row: span 2—— 跨行项脱离当前行stretch约束，直接破坏对齐一致性
别指望 subgrid 解决所有嵌套对齐问题
subgrid 目前不能用于解决常规嵌套容器对齐问题——它不被主流浏览器广泛支持，且仅适用于特定场景。你遇到的“嵌套 Grid 对齐难”，绝大多数情况下不该指望 subgrid：
- 截至 2026 年 7 月，Chrome / Edge 117+ 和 Safari 16.4+ 支持，Firefox 仍需手动开启实验标志
-
@supports (grid-template-columns: subgrid)检测不可靠，实际运行时仍可能静默失效 -
subgrid不解决“子容器自身在父网格中的位置对齐”，只解决“子容器内部元素如何对齐到父网格线” - 三层嵌套时，
.card设grid-template-rows: subgrid→ 它对齐的是.list的行轨道；.content再设subgrid→ 它对齐的是.card的轨道，不是.list的
真正影响对齐的，往往是容器高度缺失、align-self 冲突、或误用 margin: auto —— 这些比折腾 subgrid 更值得优先排查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
