grid-template-areas仅定义网格区域命名与布局结构，不控制容器尺寸；容器大小由width、height等常规CSS属性决定，且必须配合grid-area使用才能使元素归位，否则按默认流排列。
grid-template-areas 本身不控制容器大小
grid-template-areas 只负责命名和划分网格区域（比如 "header header" "main sidebar"），它不设定容器宽高，也不影响 grid-container 自身尺寸。容器大小仍由常规 CSS 属性决定：比如 width、height、min-width、max-width，或父容器的约束、内容撑开等。
常见误解是写了 grid-template-areas 就“自动布局好了”，结果发现容器塌陷或溢出——问题往往出在没显式设尺寸，或子项未配合 grid-area 正确归位。
必须配合 grid-area 才能让元素进入定义的区域
仅声明 grid-template-areas 是无效的，每个子元素必须用 grid-area 指定对应名称，否则它们会按默认流排列（可能堆在第一格，或被忽略）。
-
grid-area值必须与grid-template-areas中某一个字符串完全一致（包括引号内拼写、空格、换行） - 区域名不能含空格、连字符开头、数字开头；推荐用小写字母+下划线，如
"hero"、"nav-bar" - 未被
grid-area引用的区域会留空；同一区域名可被多个元素共用（但通常不推荐，易覆盖）
```css
.container {
display: grid;
grid-template-areas:
"header header"
"nav main"
"footer footer";
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.header { grid-area: header; }
.nav { grid-area: nav; }
.main { grid-area: main; }
.footer { grid-area: footer; }
```
响应式中 grid-template-areas 容易断行错位
多行字符串写法对缩进和换行敏感。CSS 解析时，每行字符串必须严格对齐列数，否则区域错位（例如第二行少一个词，整个网格列数就变）。
立即学习“前端免费学习笔记（深入）”；
