grid容器height: 100%失效的根本原因是父容器高度为auto导致百分比无基准，必须确保html、body及所有中间容器均设height: 100%或具体值，并检查flex父容器是否漏写flex: 1、子项是否自设height/min-height干扰align-items: stretch。
Grid容器设了height: 100%却没撑开，问题不在Grid本身
根本原因是 height: 100% 不是“占满屏幕”，而是“占满父容器的计算高度”。如果父容器的 height 是 auto（默认值），浏览器根本算不出 100% 对应多少像素，这个声明就直接被忽略——Grid 容器退化为内容撑开的高度。
必须从根往下逐层确认高度链是否完整：
-
html和body必须同时设height: 100%——只设body没用，html是它的父级 - 中间所有嵌套容器（比如
.wrapper、.content）都得设height: 100%或具体像素值 - 检查是否用了
display: inline、display: table-cell或float——这些会让父容器无法作为有效的“包含块”
用开发者工具点开目标 Grid 容器，在「Computed」面板里看 height 是不是具体数值；如果是 auto，说明某层父级没传下来高度。
Grid在Flex父容器里塌陷，漏写了flex: 1
Flex 默认用 align-items: stretch 拉伸子项，但这个拉伸只对“有明确主轴尺寸”的子项生效。而 Grid 容器本身没有固有高度，Flex 不会主动把它“撑满”交叉轴（即高度方向）。
修复的关键连接点是给 Grid 容器加 flex: 1：
- 确保 Flex 父容器自身有确定高度（如
height: 100vh或min-height: 500px） - Grid 子项（即 Grid 容器本身）必须显式声明
flex: 1，不能只写display: grid - 若 Flex 父级设置了
min-height: 0或height: fit-content，会直接禁用align-items: stretch，此时需在 Grid 容器上加min-height: 0解除限制
很多人调 grid-template-rows: 1fr 调到崩溃，其实该回去看一眼 flex: 1 漏没漏写。
写了1fr却还是塌缩，父容器没“剩余空间”可分
1fr 不是魔法单位，它代表“分配父容器剩余可用高度”。如果父容器自身高度是 auto（比如没设 height、min-height，也没被外层 flex/grid 约束），那它就没有“剩余空间”可分，1fr 就退化为 auto。
常见失效链：html → body → .wrapper → .grid，只要其中任意一层是 height: auto，.grid 的 1fr 就失效。
稳妥方案：
- 给 Grid 容器加
min-height: 100vh（注意 iOS Safari 地址栏收起/展开时vh值会重算，布局可能跳动） - 若 Grid 在 Flex 容器内，父级设
flex: 1，Grid 容器再设height: 100%+min-height: 0（防 Flex 项拉伸干扰） - 避免同时写
height: 100%和min-height: 100vh——后者可能被忽略，导致百分比基准丢失
子元素写了height/min-height，直接压制align-items: stretch
align-items: stretch（默认值）只在子项**未设置块轴尺寸约束**时生效。一旦子项自己写了 height、min-height 或 max-height，浏览器就会优先尊重这些声明，stretch 被跳过。
即使父容器高度明确、grid-template-rows 用了 1fr，子项也不会填满轨道。
排查要点：
- 检查子项是否意外继承了
height: 100%或min-height: 0（某些 CSS 重置库会设） - 临时加
height: unset或min-height: unset测试是否恢复拉伸 - 若需保留最小高度保障，改用
min-height: min-content或min-height: fit-content，它们不与stretch冲突
真正卡住的地方往往不在 Grid 代码本身，而在外层布局是否把高度“交出来”——尤其是 flex: 1 和高度继承链这两个点，最容易被跳过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
