grid-template-rows: subgrid 无效的主因是父容器未显式定义 grid-template-rows 或子元素非直接子项；必须满足父设 display: grid 且显式声明行模板，子元素才可继承对齐。
写了 grid-template-rows: subgrid 却没对齐？大概率是父容器没定义显式行轨道，或子元素不是直接子项——Subgrid 不是自动开关，而是有明确生效前提的继承指令。
为什么 grid-template-rows: subgrid 没效果
浏览器对 subgrid 的处理非常严格：它不继承隐式轨道，也不接受模糊声明。常见失效原因包括：
- 父容器只用了
grid-auto-rows: 100px或grid-row-gap，但没写grid-template-rows—— 没有“模板”，就无“子”可继 - 父容器用
repeat(auto-fit, minmax(200px, 1fr)))定义列，却指望子元素靠grid-template-rows: subgrid对齐行 —— 列方向没模板，不影响行，但很多人误以为“只要用了 grid 就能 subgrid” - 子元素被包在
display: contents容器里，实际已不是父网格的直接子项 ——subgrid只认真实 DOM 子节点 - 开发者工具里检查 computed 样式，发现
grid-template-rows解析为none而非subgrid，说明声明被浏览器静默丢弃
grid-template-rows: subgrid 必须配合的父级定义
要让子元素真正挂载到父行轨道上，父容器必须满足两个硬性条件：
- 设
display: grid - 显式声明
grid-template-rows，例如：grid-template-rows: auto 1fr auto或grid-template-rows: 60px minmax(80px, 1fr) 40px - 避免混用：不能写
grid-template-rows: subgrid 50px—— 整条声明会被忽略 - 若只需继承行、不继承列，可以只写
grid-template-rows: subgrid，列方向仍可自定义（如grid-template-columns: 1fr 2fr）
子元素内部如何用父轨道定位
启用 grid-template-rows: subgrid 后，子元素自身仍是网格容器，它的子元素（即孙辈）可直接使用父级的行线编号定位：
- 父容器定义了三行：
grid-template-rows: auto 1fr auto→ 行线编号为 1 / 2 / 3 / 4 - 子元素设
grid-template-rows: subgrid，不改变行线编号体系 - 子元素的子元素（如
.title、.body）可写grid-row: 1、grid-row: 2，直接锚定父轨道线 - 不需要计算像素、也不需要重复定义高度，所有
.body自动落在同一视觉行区间内
三层嵌套时 grid-template-rows: subgrid 的真实作用域
Subgrid 不跨级穿透。如果结构是 .list → .card → .content，那么：
-
.card设grid-template-rows: subgrid→ 它对齐的是.list的行轨道 -
.content再设grid-template-rows: subgrid→ 它对齐的是.card的行轨道（而.card若没定义自己的grid-template-rows，那它就没有可继承的行轨道） - 中间层
.card若加了gap: 1rem，会插入隐式轨道，导致.content的grid-row: 2实际落到错位位置 - 想让
.content也对齐最外层，唯一可靠路径是：.list定义行轨道 →.card用subgrid且零干扰（不加 gap、不手动 span、不插空 div）→.content再用subgrid
真正难的不是写对那一行 subgrid，而是控制整条嵌套链路上没有隐式轨道插入、没有 display: contents 中转、没有媒体查询中途重写父轨道——这些细节一漏，对齐就断在看不见的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
