这不是bug，是grid默认行为：grid-auto-rows为auto时各行高度由内容独立决定；1fr需父容器有明确高度上下文；align-items: stretch被子项尺寸声明覆盖；跨行不改变轨道自身高度。
grid-template-rows设为auto或留空时，子元素不撑高父容器
这不是bug，是Grid默认行为：grid-auto-rows 默认值是 auto，意味着每行高度完全由该行内子项内容决定，各行独立计算。结果就是父容器高度 = 所有行高度之和，但若某行内容极少（比如只有文字无换行），那行就塌缩，整体看起来“没撑开”。
常见误操作是只写 display: grid，却不定义 grid-template-rows 或 grid-auto-rows，指望子项自动拉伸——它不会。
- 想让所有行等高：显式用
grid-template-rows: repeat(3, 1fr)（前提是父容器有明确高度） - 想让每行至少有最小高度、又能随内容增长：用
grid-template-rows: repeat(3, minmax(200px, 1fr)) - 若子项数量不固定，需控制隐式行：加
grid-auto-rows: minmax(200px, 1fr)，避免新增项所在行塌成一条线
写了1fr却还是塌陷，问题出在父容器没高度上下文
1fr 不是魔法单位，它代表“分配父容器剩余可用高度”。如果父容器自身高度是 auto（比如没设 height、min-height，也没被 flex/grid 父级约束），那它就没有“剩余空间”可分，1fr 就退化为 auto。
典型失效链：html → body → .wrapper → .grid，只要其中任意一层是 height: auto，.grid 的 1fr 就失效。
- 快速验证：打开开发者工具，选中 Grid 容器，在「Computed」面板看
height是不是具体像素值；如果是auto，说明高度链断了 - 稳妥方案：给 Grid 容器加
min-height: 100vh（注意 iOS Safari 地址栏变化可能引发跳动） - 更健壮的嵌套方案：若 Grid 在 Flex 容器内，父级设
flex: 1，Grid 容器再设height: 100%+min-height: 0（防 flex 项拉伸干扰）
子项写了height/min-height/max-height，直接压制align-items: stretch
align-items: stretch（默认值）只在子项**未设置块轴尺寸约束**时生效。一旦子项自己写了 height、min-height 或 max-height，浏览器就会优先尊重这些声明，stretch 被跳过。
这种情况下，即使父容器高度明确、grid-template-rows 用了 1fr，子项也不会填满轨道。
- 检查子项是否意外继承了
height: 100%或min-height: 0（某些重置样式库会设） - 临时加
height: unset或min-height: unset测试是否恢复拉伸 - 若需保留最小高度保障，改用
min-height: min-content或min-height: fit-content，它们不与stretch冲突
grid-row跨行但目标轨道是auto，高度来源依然缺失
写 grid-row: 1 / 3 并不能“把两行高度合并起来撑开”，它只是让子项跨越两行显示。如果第1行和第2行的轨道高度都是 auto，那这两行仍各自按内容算高，子项只是视觉上覆盖过去，实际轨道本身没获得高度。
真正让跨行子项撑高的方式，是让它跨越的那些轨道本身就有可计算高度。
- 正确做法：用
grid-template-rows: 200px 200px或1fr 1fr显式定义这两行，再让子项grid-row: 1 / 3 - 错误做法：保持
grid-template-rows: auto auto，只靠跨行“假装撑高”——无效 - 若必须动态跨行，建议改用
grid-template-rows: repeat(2, minmax(200px, 1fr))，确保轨道有底线
grid-template-rows，而是没打开开发者工具，逐层点开父元素看「Computed height」是不是你预期的数值。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
