grid-template-areas 必须配合 display: grid 容器使用，每组引号代表一行，区域名需与 grid-area 值完全一致；Header/Full/Footer 三行布局需设 height: 100vh 和 min-height: 0 才能实现 Main 自适应与滚动。
grid-template-areas 必须配合 display: grid 容器使用
很多人写完 grid-template-areas: "header header" "main main" "footer footer" 却没效果，根本不是语法错，而是忘了给父容器加 display: grid。Grid 布局不靠子元素声明生效，只作用于直系子元素，且必须从容器层启用。
常见错误现象包括：区域名不匹配、grid-area 值被忽略、整个布局塌成一列或单行。
- 根容器（如
<div class="app-layout">）必须设display: grid -
grid-template-areas中每组引号代表一行，空格分隔列；重复名称表示跨列，.表示空单元格 -
grid-area值必须与grid-template-areas中的字符串完全一致（大小写、空格、引号都敏感） - 避免用空格或特殊字符，例如
grid-area: "user list"会失败，应写为grid-area: user-list
Header 固定高 + Main 自适应 + Footer 粘底的三行结构
最简可行写法是：grid-template-rows: 60px 1fr auto; —— Header 固定 60px，Main 吃掉所有剩余空间，Footer 根据内容自适应高度。但要注意，1fr 不是魔法，它需要容器有明确高度基准。
关键约束：
立即学习“前端免费学习笔记（深入）”；
- 容器必须设
height: 100vh或其他确定高度（如嵌在 Vue/React 组件中时，得靠父级传入高度或 JS 动态计算） - Header 和 Footer 通常不需要滚动，Main 才需要；若 Main 内容超长，必须显式加
overflow-y: auto，否则会触发双滚动（页面整体 + Main 内部） - 别只写
overflow: auto，横向溢出可能意外干扰表格、侧边栏或工具栏 - IE11 不支持
fr，需回退为grid-template-rows: 60px calc(100vh - 60px) auto;，注意calc()内运算符两侧必须有空格
Main 区域内部滚动失效的典型原因
写了 overflow-y: auto 却没滚动？大概率是 Main 的最小尺寸没压制住子元素撑开行为。Grid 布局下，子项默认有 min-width: auto 和 min-height: auto，一旦里面嵌了 Flex 或另一个 Grid，它们可能强行拉伸 Main 高度，导致滚动无法触发。
解决方式很直接：
- Main 元素本身加
min-height: 0（尤其当它是 Grid 子项时） - 如果 Main 内还有子 Grid/Flex，确保它们的直接子容器也设
min-width: 0或min-height: 0 - 避免对 Main 设
padding后又忘记调整box-sizing，否则实际可用高度变小，内容被截断 - 检查是否误给 Main 设了
height: 100%—— 在 Grid 中这常导致循环依赖，不如用1fr或calc()
Header 里按钮/Logo 居中对齐总“飘”？别硬调 margin
Header 是 Grid 子项，但它本身不是 Grid/Flex 容器，所以 text-align: center 或 margin: auto 很容易失效——尤其是当它被设了固定高度又没处理内部流式行为时。
真正可控的做法只有两种：
- 在 Header 上加
display: flex，再用justify-content和align-items直接对齐 - 或者设
display: grid，配grid-template-columns: auto 1fr auto，把 Logo、标题、操作区分别放进三列 - 避免在 Header 上同时设
padding和height: 60px且没设box-sizing: border-box，实际高度会超，压到 Main 顶部 - 如果 Header 里有图标字体（如 FontAwesome），注意
font-size和line-height是否一致，否则视觉上会“偏移”
实际搭建时，最易被忽略的是 min-height: 0 和 IE11 的 calc() 空格要求——前者让滚动生效，后者让兼容性不崩。这两个点不处理，框架看起来就“卡”在半成品状态。
