最稳的圣杯布局路径是正确使用grid-template-areas，需严格对齐区域字符串、配齐行列尺寸、显式声明grid-area。
直接用 grid-template-areas 是目前最稳、最易维护的圣杯布局路径，前提是写对三处关键：区域字符串格式、列行尺寸配合、元素 grid-area 显式声明。
grid-template-areas 字符串必须严格对齐且无空格错位
每行引号内的单词数必须一致，否则整条声明失效，页面会退回到普通流布局（不报错，但“突然塌陷”）。
- 正确写法：
"header header header" "nav main aside" "footer footer footer"（三行都是 3 个词） - 错误写法：
"header header" "nav main aside" "footer"（词数不等 → 失效） - 单词间只能用单空格分隔；双空格或制表符会让浏览器断开区域名，比如
"nav main"会被解析成两个独立区域nav和main，中间留白 - Firefox 对换行和空格更敏感，建议所有字符串写成单行，避免编辑器自动换行干扰
必须配齐 grid-template-columns 和 grid-template-rows
grid-template-areas 只定义语义区域位置，不控制尺寸。漏掉 grid-template-columns 或 grid-template-rows，布局大概率高度塌陷或列宽异常。
- 三栏常见组合：
grid-template-columns: 200px 1fr 200px（左固定、中弹性、右固定） - 全高布局必备：
grid-template-rows: auto 1fr auto（头尾自适应内容，中间占满剩余空间） - 如果只写
grid-template-columns没写grid-template-rows，而主内容又为空，整个网格容器高度可能为 0 —— 这是新手最常踩的“看不见布局”坑 - 别用
1fr直接替代minmax(0, 1fr)：当主内容含超宽表格时，1fr可能强制压缩侧边栏，minmax(0, 1fr)更安全
每个子元素必须显式设置 grid-area，且名称大小写完全匹配
grid-template-areas 是声明式匹配，不是自动识别类名或标签。没设 grid-area 的元素会被按 DOM 顺序填入网格，默认从左上角开始，极易错位。
- HTML 中
<aside></aside>元素，CSS 必须写aside { grid-area: aside; }，不能写成aside { grid-area: Aside; }（大小写敏感） - 区域名不能含空格、点、括号，合法命名如
left-nav、main_content，但避免1-nav（数字开头易与线号混淆） - 若某区域在响应式中被移除（如移动端隐藏
aside），对应元素的grid-area建议保留，但把该区域名从grid-template-areas字符串中删掉；否则它会强行塞进第一格，破坏结构 - 调试时看开发者工具 computed 样式里
grid-area是否为auto：若是，说明该元素没被任何区域名匹配上
响应式切换只需改两处，但必须同步更新
小屏下改成单列，核心就改 grid-template-areas 和 grid-template-columns，其余样式可复用。
- 移动端模板示例：
"header" "nav" "main" "aside" "footer"+grid-template-columns: 1fr - 注意：此时
nav和aside的grid-area仍为原值（nav、aside），但因新模板已包含这些区域名，它们会自然归位 - 常见翻车点：只改了
grid-template-areas，却忘了把grid-template-columns从200px 1fr 200px改成1fr，结果多出两列轨道，内容横向溢出 - 如果用
display: contents封装过某区域容器（比如把<nav></nav>包在<div class="nav-wrapper"> 里），<code>grid-area必须设在子元素上——display: contents会让父容器“消失”，grid-area失效真正难的不是写出来，而是确保区域名、
grid-area、grid-template-columns三者在每个断点下都一一对应；一旦漏掉一个字母或一行尺寸声明，DevTools 里看不出报错，但视觉上已经偏移了。
