grid-template-areas 定义的圣杯布局是通过命名区域字符串（如"header header header" "nav main aside" "footer footer footer"）抽象布局，再用 grid-area 分配元素；需列数对齐、禁用中文标点与非法字符，响应式靠媒体查询重写该属性，footer 贴底需配合 grid-template-rows 或 grid-row 控制行高。
什么是 grid-template-areas 定义的圣杯布局
圣杯布局（header + 两侧固定侧栏 + 中间流式内容 + footer）用 grid-template-areas 实现，本质是把布局抽象成「命名区域字符串」，再用 grid-area 把元素分配进去。它不依赖浮动或负 margin，天然支持响应式重排，但必须保证所有区域名在字符串中严格对齐（空格和换行要一致），否则解析失败。
怎么写合法的 grid-template-areas 字符串
字符串里每行代表一行网格，每个单词是一个区域名，空格分隔列，. 表示空单元格。常见错误是列数不一致或用了中文标点：
- ✅ 正确：
"header header header" "nav main aside" "footer footer footer" - ❌ 错误：
"header header" "nav main aside" "footer"（第1、3行只有2列，中间行3列 → 浏览器直接忽略整条声明） - ❌ 错误：
"header header header"（全角空格 → 解析为单个区域名header header header）
区域名不能含空格、连字符或数字开头，建议全小写+下划线，比如 main_content 可以，main-content 不行。
如何给元素分配区域并处理响应式切换
每个子元素需设 grid-area 值，且必须与字符串中出现的名称完全一致。响应式时，直接覆盖 grid-template-areas 即可，不需要改 HTML 结构：
立即学习“前端免费学习笔记（深入）”；
body {
display: grid;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
}
@media (max-width: 768px) {
body {
grid-template-areas:
"header"
"nav"
"main"
"aside"
"footer";
}
}
注意：移动端把 nav 和 aside 拆开堆叠时，它们各自仍需独立的 grid-area: nav / grid-area: aside，不能省略。
为什么 footer 有时不贴底或高度异常
grid-template-areas 本身不控制行高，所有行默认按内容撑开。如果 footer 区域内容少，又没设最小高度，就会显得“悬空”。解决方式只有两种：
- 给
grid-row-end显式指定结束位置，比如grid-row: 3 / -1让 footer 占满剩余空间 - 用
grid-template-rows配合minmax()或1fr控制行高，例如：grid-template-rows: auto 1fr auto（header 自适应，main 占剩余，footer 自适应）
只靠 grid-template-areas 字符串无法定义尺寸，区域名只是“占位符”，尺寸逻辑必须另外声明。
