grid子项默认不继承父容器高度，需通过grid-template-rows（如1fr）定义行轨道高度，align-self:stretch仅在子项无显式高度且轨道尺寸确定时生效。
Grid 子元素默认不继承父容器高度，这是设计使然，不是 bug。它和 Flex 不同：Grid 容器的 height 只定义容器自身尺寸，子项（grid item）默认按内容撑开，不会自动填满行轨道（track），除非你显式干预。
align-self 控制的是单个子项在单元格内的对齐，不是“继承高度”
很多人误以为设 align-self: stretch 就能让子项“撑满高度”，其实它只在子项**没有显式设置高度**且所在行轨道有确定尺寸时才生效。如果父容器 height 是 auto 或子项自己写了 height: 100px，align-self 就基本没机会起作用。
-
align-self: stretch生效前提：子项未设置height/min-height，且其所在行轨道（grid-row对应的grid-template-rows值）是固定值（如100px）或1fr - 如果父容器
height: auto，整行轨道高度由内容决定，stretch 就无“可伸空间” -
align-self: start/center/end只改变子项在单元格内的垂直位置，不改变其自身高度
真正让子项“填满高度”的关键在 grid-template-rows
子项能否撑高，取决于它所在的行轨道是否具备明确高度。靠 align-self 单打独斗不行，得配合容器层定义。
- 用
grid-template-rows: 1fr替代auto或留空：强制该行占据剩余可用空间 - 避免写
grid-template-rows: max-content—— 它会让轨道高度完全由内容决定，子项再怎么 stretch 也撑不满 - 若需多行均等分高，用
1fr 1fr；若首行固定、余下自适应，写200px 1fr - 注意：父容器本身必须有可计算的高度来源（比如设置了
height: 400px，或被 flex/grid 父级约束）
常见失效场景和绕过方式
遇到 align-self: stretch 不生效，先检查这些硬性条件是否满足：
- 父容器没设
display: grid？—— 必须有，且不能被float或position: absolute干扰布局上下文 - 子项写了
height、min-height或max-height？—— 这些会直接压制stretch行为 - 用了
grid-auto-rows而非grid-template-rows？——grid-auto-rows只影响隐式网格行，对显式定义的子项无效 - 子项跨行（
grid-row: 1 / 3）但目标行轨道高度为auto？—— 跨行不解决高度来源问题，仍需轨道本身有尺寸
最常被忽略的一点：Grid 的“高度继承”本质是轨道驱动，不是样式继承。别指望子项自动读取父容器 height，得靠 grid-template-rows 把高度“分配”下去，align-self 只是最后一步微调对齐方式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
