最简两行Grid布局为display: grid; grid-template-rows: 60px 1fr; height: 100vh;，Header固定60px，Main用1fr自适应并需overflow-y: auto防双滚动，IE11须改用calc(100vh - 60px)。
用 display: grid 定义两行式布局：Header + Main 最简写法
直接给容器设 display: grid，配合 grid-template-rows 划分高度，就能避开浮动、Flex嵌套或绝对定位的麻烦。Header 固定高、Main 自适应填满剩余空间，是后台最常见需求。
关键不是“怎么写”，而是“别写错单位”——1fr 不能写成 1frpx，60px 不能漏单位，否则整行塌陷。
-
grid-template-rows: 60px 1fr;—— Header 占 60px，Main 吃掉所有剩余空间 - 容器必须有明确高度（如
height: 100vh;），否则1fr没参考基准 - Header 和 Main 都要设
grid-area或靠顺序隐式命名，否则可能错位
Header 固定、Main 滚动时，为什么 Main 不撑开容器？
因为 1fr 分配的是容器内部可用空间，不是内容高度；当 Main 内容超长，它默认会随内容增长，但滚动需手动触发。不加限制，整个页面会双层滚动（外层窗口 + 内层 Main）。
- Main 必须加
overflow-y: auto;才能内部滚动 - 别只写
overflow: auto;—— 横向溢出可能意外触发，干扰表格或侧边栏 - 如果 Main 里有子 Grid 或 Flex，它们的最小尺寸（
min-width: 0/min-height: 0）常被忽略，导致内部元素撑破 Main
Grid 布局下，Header 里的按钮/Logo 怎么对齐才不“飘”？
Header 是 Grid 子项，但它本身不是 Grid 容器——除非你显式设 display: grid 或 display: flex。直接在 Header 上用 text-align 或 margin: auto 很容易失效。
- Header 内部推荐用
display: flex：更可控，justify-content和align-items直接生效 - 若坚持用 Grid，在 Header 上加
display: grid; grid-template-columns: auto 1fr auto;，把 Logo、标题、操作区分别放进三列 - 避免对 Header 设
padding后又用box-sizing: border-box外加height: 60px—— 实际高度会超，压到 Main 顶部
IE11 兼容？别用 1fr，改用 calc() + 显式像素
IE11 支持 Grid，但不支持 fr 单位。强行用会退化为单列，Header 和 Main 叠在一起。这不是 bug，是规范没实现。
- 兼容写法：
grid-template-rows: 60px calc(100vh - 60px); - 注意
calc()里运算符两侧必须有空格，calc(100vh-60px)会无效 - 如果容器高度来自父级（比如嵌在
App组件里），不能硬写100vh，得用 JS 动态算或换 Flex 回退方案
Grid 做后台框架快，但“快”的前提是清楚哪些地方浏览器不买账——尤其是 fr、minmax()、嵌套 subgrid 这些，一个没兜住，Header 就可能消失在滚动条下面。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
