Grid项height:100%无效是因为父容器高度为auto导致计算链断裂；需为Grid容器设显式高度（如height:100vh），并给Grid项加min-height:0，优先用1fr替代height:100%。
Grid 项写 height: 100% 无效，不是 Grid 本身不支持，而是浏览器压根算不出“100%”对应多少像素——它的直接父级（即 Grid 容器）的 computed height 是 auto，导致整个高度链断裂。
Grid 容器自身必须有显式高度上下文
Grid 的 grid-template-rows: 1fr 不会凭空创造空间；它只在容器已有可用高度的前提下分配剩余空间。如果 .grid-container 没设 height、min-height 或视口单位，它的 computed height 就是 auto，此时所有子项的百分比高度都会退化为 auto。
- 用开发者工具选中 Grid 容器 →「Computed」面板 → 查
height：若显示auto，说明上层没传下来高度 - 常见修复方式：
.grid-container { height: 100vh; }或{ height: 100%; }（前提是html和body已设height: 100%） - 避免用
min-height: 100vh替代height：百分比高度不认min-height作基准
Grid 项默认不拉伸，min-height: 0 往往是关键一环
即使 Grid 容器有了明确高度，Grid 项（即子元素的直接父级）仍可能因默认最小尺寸限制而忽略 height: 100%，尤其在 Chrome 中。这不是 bug，而是 align-items: stretch 被隐式 min-height: auto 抑制了。
- 给 Grid 项加
min-height: 0（不是min-height: 0px），解除其默认最小高度锁定 - 若 Grid 项内部还嵌套了
display: flex容器，那个 Flex 容器也得加min-height: 0 - 别混用
height: 100%和align-items: stretch：前者可能覆盖后者的拉伸行为
优先用 1fr 替代 height: 100%
在 Grid 布局中，height: 100% 是绕远路；1fr 是原生的空间分配机制，只要 Grid 容器自身有高度上下文，它就能可靠工作，且不依赖父级是否显式设高。
- 想让子元素占满某一行轨道？直接放进
grid-template-rows: 1fr的轨道里，或写grid-row: 1 / -1 - 避免在 Grid 项上同时写
height: 100%和flex: 1：前者是初始尺寸参考，后者会接管空间分配，容易冲突 -
1fr在旧版 Chrome（≤49）中也有兼容问题，但现代浏览器（Chrome 50+、Firefox、Safari 10.1+）已稳定支持
真正容易被忽略的，是没打开开发者工具逐层点开 Grid 容器和每一层父级，确认「Computed」里的 height 是具体数值而不是 auto——而不是靠“应该有了”去猜。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
