grid-template-areas 必须用引号包裹整个布局字符串，每行单独引号，区域名间用空格分隔且需垂直对齐；grid-area 值须与模板中名称完全一致（大小写、拼写、无引号）；空白处必须用英文句点“.”占位；响应式需在媒体查询中重写整个 grid-template-areas。
grid-template-areas 必须用引号包裹字符串
很多人写 grid-template-areas 时直接拼接单词，比如写成 grid-template-areas: header main sidebar footer;，结果完全不生效。CSS 规范要求每个区域定义必须是**单个带引号的字符串**，所有行用空格分隔列、用换行（或分号）分隔行。
正确写法是把整套布局写成一个字符串，每行用引号单独包住：
grid-template-areas: "header header header" "main main sidebar" "footer footer footer";
注意：引号内单词之间用**至少一个空格**分隔，空格数不影响列宽（列宽由 grid-template-columns 控制），但必须对齐——同一列位置上的单词要垂直对齐，否则解析失败或区域错位。
grid-area 值必须和 grid-template-areas 中的名称完全一致
grid-area 是元素的“身份证”，它要填进 grid-template-areas 里定义过的某个名字，大小写、拼写、空格都不能差。比如你在模板里写了 "sidebar"，那对应元素就得写 grid-area: sidebar;，而不是 grid-area: side-bar; 或 grid-area: "sidebar";（引号是模板语法，不是 grid-area 的取值语法）。
立即学习“前端免费学习笔记（深入）”；
常见错误包括：
- 多写了引号：
grid-area: "header";→ 应为grid-area: header; - 大小写混用：
grid-template-areas: "Header main"和grid-area: header不匹配 - 用了保留字没转义：
grid-area: auto或grid-area: none会被当成关键字而非区域名（虽然不报错，但不会映射到模板）
空白区域要用英文句点 . 占位，不能留空格或省略
想让某格“空着”，必须显式写 .（英文句点），且要和其他区域对齐。比如中间一列不想放内容，得这样写：
grid-template-areas: "header . footer" "nav main content";
如果写成 "header footer"（中间漏掉占位符），浏览器会认为这行只有两列，和其它行列数不一致，整个 grid-template-areas 声明失效，回退到默认网格行为。
多个连续空格也不行："header . footer" 是合法的，但 "header footer"（中间没点）就非法。
响应式切换区域布局要重写整个 grid-template-areas
没法只改某一行，也不能用变量注入。想在移动端把三栏变两栏，就得在媒体查询里重新定义全部区域字符串：
@media (max-width: 768px) {
.container {
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
grid-template-columns: 1fr;
}
}
注意：此时原布局中横向并列的区域（如 "main sidebar"）被拆成上下结构，对应元素的 grid-area 值不用改，只要名字还在新模板里出现就行。但如果新模板删掉了某个名字（比如去掉了 sidebar），那个元素就会脱离命名区域，按常规网格顺序流式排列，容易出视觉错乱。
复杂页面建议提前规划好各断点下的区域名集合，避免某些名字只在部分断点存在。