用 display: grid 实现响应式圣杯布局需两行核心 CSS：grid-template-columns 控制列宽，grid-template-areas 定义语义区域；二者必须严格匹配列数与行数，且 grid-area 必须显式设置并完全一致，否则降级为单列流。
直接用 display: grid 实现响应式圣杯布局，三栏结构只需两行核心 CSS：grid-template-columns 控制列宽，grid-template-areas 定义语义区域；移动端切换只需改这两处，其他样式天然继承。
grid-template-areas 字符串必须每行单词数一致
写错空格或行数不齐，整个网格会退化为单列流——不报错，但页面“突然塌陷”。这不是 bug，是规范行为：浏览器解析时只要发现某行单词数与其他行不等，整条 grid-template-areas 声明即失效，降级为隐式网格。
- ✅ 正确写法：
grid-template-areas: "header header header" "nav main aside" "footer footer footer";（每行 3 个词，对应三列） - ❌ 错误写法：
"header header" "nav main aside" "footer"（第 1、3 行只有 2 个词） - 单词间只允许单个 ASCII 空格，不能用制表符、全角空格或双空格
- 引号不可省略，
grid-template-areas的值必须是字符串字面量 - 区域名大小写敏感：
aside和Aside是两个不同区域
grid-template-columns 必须显式声明且与 areas 列数匹配
没写 grid-template-columns，grid-template-areas 再对也白搭——所有子元素默认挤在第一列。它不是可选配置，而是定义显式网格轨道的必要条件。
- 三栏圣杯常用组合：
grid-template-columns: 200px 1fr 200px（左固定、中弹性、右固定） - 若侧栏需自适应内容宽度，可用
max-content或fit-content(200px)替代固定值 - 避免混用
%和fr，比如20% 1fr 20%：百分比按容器宽算，fr分的是剩余空间，结果不可控 -
1fr不是“占 1/3 宽度”，而是“取扣除其他已定尺寸后的剩余空间的 1 份”；主内容必须用1fr，不能用auto，否则不会撑高容器，footer可能上浮
每个子元素必须显式设置 grid-area 且名称完全匹配
grid-template-areas 是声明式匹配，不识别类名、标签名或属性。HTML 里写 <main></main>，CSS 里不写 main { grid-area: main; }，它就只是普通块元素，不会落入 "nav main aside" 中的 main 区域。
立即学习“前端免费学习笔记（深入）”；
- 漏设
grid-area的元素，浏览器按 DOM 顺序从左上角开始填入网格，默认位置极易错位 -
grid-area值不能带引号：grid-area: main;✅，grid-area: "main";❌（语法无效） - 区域名只能含 ASCII 字母、数字、连字符（但不建议用连字符，易与网格线混淆），不能有空格、点、括号或中文
- 父容器若被
float、position: absolute或display: contents干扰，Grid 上下文丢失，grid-area失效 - DevTools 中检查 computed 样式，若
grid-area显示为auto，说明该元素未被识别为网格项
响应式切换必须同步更新 areas 和 columns
移动端收起侧栏，不能只改 grid-template-columns: 1fr，还必须重写 grid-template-areas 字符串。否则区域映射断裂，元素可能“消失”或错位到第一格。
- ✅ 正确做法：
@media (max-width: 768px) { .container { grid-template-areas: "header" "main" "footer"; grid-template-columns: 1fr; } } - 若仍需显示导航栏，可改为堆叠顺序：
"header" "nav" "main" "footer"，并保持grid-template-columns: 1fr - 不要在不同断点里混用区域名（如桌面用
aside，平板改用sidebar），HTML 中 class 名不变会导致匹配失败 - IE11 不支持
fr单位，需用@supports not (display: grid)降级到 Flexbox，autoprefixer 无法补全逻辑
最容易被忽略的是：Grid 容器里混用 float 或 position: absolute 会让 grid-area 失效——浏览器会降级回普通文档流。只要启用了 display: grid，所有子元素就该纯粹靠网格归位，不加任何干扰样式。
