grid-template-areas仅定义命名区域地图，必须配合子元素的grid-area属性才能生效；漏设grid-area则元素按默认流排列，区域留空。
grid-template-areas 必须配合 grid-area 使用
单独写 grid-template-areas 不会生效，它只是定义“区域名到位置”的映射表；真正把元素放进对应区域，得靠每个子元素的 grid-area 属性显式指定名称。
常见错误是只在容器上写了 grid-template-areas，但忘了给子元素加 grid-area: "header" 这类声明，结果布局完全没变化。
- 容器（父元素）设
display: grid+grid-template-areas - 每个直系子元素必须设
grid-area，值要和grid-template-areas中的字符串完全一致（包括引号、大小写、空格） - 未被
grid-area覆盖的子元素会按默认网格流排列，可能破坏布局预期
字符串拼写和换行必须严格对齐
grid-template-areas 的值是一组用引号包裹的字符串，每行代表一行网格，字符串内用空格分隔列。任何错位、多空格、漏引号都会导致整条声明失效（浏览器会静默忽略该属性）。
例如下面这段合法：
立即学习“前端免费学习笔记（深入）”；
grid-template-areas: "header header header" "sidebar main main" "footer footer footer";
但以下任一情况都会让声明作废：
- 某行末尾多一个空格：
"sidebar main main " - 引号不配对或用了中文引号
- 某行列数和其他行不一致（比如第二行写了三个词，第三行只写了两个）
- 用逗号或分号代替空格分隔区域名
点（.）代表空单元格，不能省略也不能写错
空白区域必须用英文点 . 占位，且只能是单个点 —— 写成 ..、" " 或空字符串都不行。
它常用于留白、跳过某格、或让不同区域不对齐。比如侧边栏只占第一列，主内容跨两列：
grid-template-areas: "header header header" "sidebar . main" "footer footer footer";
注意：. 是关键字，不是字符；不能加引号，也不能替换为其他符号。
- 多个连续
.表示多个空单元格："sidebar . . main"表示侧边栏后空两列 - 整行都是点，如
". . ."，表示该行全空 - 如果某区域名拼错（比如写成
"hedear"），对应子元素不会报错，但会被当普通网格项处理
响应式中需重新定义整个 grid-template-areas
grid-template-areas 不支持“局部修改”，媒体查询里想改布局，必须重写整条声明，包括所有行和点位。
这意味着小屏下常见的“从左右布局变上下堆叠”，不能只调换两行顺序，而要完整重写结构：
@media (max-width: 768px) {
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
}
容易被忽略的是：此时所有子元素的 grid-area 值仍需保持不变（还是 "header"、"main" 等），因为名字没变，只是容器对名字的排布方式变了。
别试图在媒体查询里只改某一行 —— CSS 不允许部分覆盖 grid-template-areas。
