Grid容器填不满视口高度，90%因html或body未设height: 100%；grid-template-areas需父容器display: grid且子元素为直接子项；main滚动需满足容器有明确高度、自身min-height: 0、嵌套子容器也设min-height: 0。
父容器必须设 height: 100vh，且 html/body 不能留空高漏洞
Grid 容器填不满视口高度，90% 是因为 html 或 body 没设 height: 100%。Grid 的 1fr 不会凭空造高度，它只分配“已有高度内的空间”。如果根链断在某一级（比如 body 缺 height），整个 Grid 就失去纵向约束。
常见错误写法：.app { display: grid; grid-template-rows: 60px 1fr; } —— 这行代码本身没错，但若 .app 的父级没传高度，1fr 就算不出来。
- 必须加这段重置：
html, body { height: 100%; margin: 0; padding: 0; } -
.app自身也要写height: 100%（不是100vh，避免双 vh 嵌套滚动条） - 若用框架（如 React Router 的
<outlet></outlet>），确保外层 Layout 组件也透传了高度
grid-template-areas 必须配 display: grid，且仅对直系子元素生效
写了 grid-template-areas: "header header" "sidebar main" 却没反应？不是语法错，是父容器漏了 display: grid，或者子元素嵌套太深。
后台布局典型结构里，header、sidebar、main 必须是 .app 的**直接子元素**。React 中常见错误：把 <header></header> 包在另一个 <div> 里，导致它不再是 Grid Item。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11112" title="CSS工具箱(专业版)"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e352aa140.jpg" alt="CSS工具箱(专业版)" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11112" title="CSS工具箱(专业版)">CSS工具箱(专业版)</a>
<p>全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。</p>
</div>
<a href="/xiazai/skill11112" title="CSS工具箱(专业版)" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<ul>
<li>验证是否生效：选中 <code>main 元素，在控制台运行 getComputedStyle(el).gridArea，返回空字符串说明没绑上
grid-area: main 必须和 grid-template-areas 字符串里的 "main" 完全一致（大小写、空格、引号都算）.main { grid-area: main; } 没用，除非这个 .main 元素本身就是直系子项main 区域要滚动，得同时满足三个条件
写了 overflow-y: auto 但 main 还是不滚动？根本原因是 Grid 的 1fr 不提供最小高度保障，它默认允许子项撑开自己。滚动的前提是：容器有明确高度上限 + 内容能溢出 + 子项不强制撑高。
-
.app必须有明确高度（如height: 100%） -
main元素自身加min-height: 0（Grid 子项默认min-height: auto，会阻止滚动） - 如果
main里面还套了一层 Flex/Grid（比如卡片列表用display: flex; flex-direction: column），那它的**直接子容器**也得加min-height: 0，否则弹性子项会突破限制
响应式切换时 grid-template-areas 和 grid-area 必须同步更新
移动端把三栏压成单列，不能只改 grid-template-areas。比如桌面端是 "header header header" "sidebar main main" "footer footer footer"，移动端想改成 "header" "sidebar" "main" "footer"，那所有区域的 grid-area 值也得跟着变——尤其是 sidebar，原来它占一列，现在要独占一行，它的 grid-column 行为就完全不同了。
更隐蔽的坑：某些 UI 库组件（如 Ant Design 的 <layout.sider></layout.sider>）内部封装了样式，可能自带 flex 或固定宽高，强行塞进 Grid 会破坏行列计算。遇到这种情况，优先用原生 <aside></aside> 标签，或确认该组件是否支持 style={{ display: 'contents' }} 来剥离渲染盒。
