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 的 ），确保外层 Layout 组件也透传了高度

grid-template-areas 必须配 display: grid，且仅对直系子元素生效

写了 grid-template-areas: "header header" "sidebar main" 却没反应？不是语法错，是父容器漏了 display: grid，或者子元素嵌套太深。

后台布局典型结构里，header、sidebar、main 必须是 .app 的**直接子元素**。React 中常见错误：把

包在另一个

里，导致它不再是 Grid Item。

• 验证是否生效：选中 main 元素，在控制台运行 getComputedStyle(el).gridArea，返回空字符串说明没绑上
• grid-area: main 必须和 grid-template-areas 字符串里的 "main" 完全一致（大小写、空格、引号都算）
• 不要指望类名自动映射：.main { grid-area: main; } 没用，除非这个 .main 元素本身就是直系子项

main 区域要滚动，得同时满足三个条件

写了 overflow-y: auto 但 main 还是不滚动？根本原因是 Grid 的 1fr 不提供最小高度保障，它默认允许子项撑开自己。滚动的前提是：容器有明确高度上限 + 内容能溢出 + 子项不强制撑高。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

• .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 的 ）内部封装了样式，可能自带 flex 或固定宽高，强行塞进 Grid 会破坏行列计算。遇到这种情况，优先用原生

标签，或确认该组件是否支持 style={{ display: 'contents' }} 来剥离渲染盒。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！