grid-template-areas 实现居中靠配合 grid-template-rows 和 grid-template-columns 构造对称空白区域“挤”内容至中间，需三者同时定义且行列数严格匹配，中间轨道用 minmax()、两侧用 1fr 实现弹性对称。
grid-template-areas 居中布局的核心逻辑
用 grid-template-areas 实现居中，本质不是靠它自己“居中”，而是靠配合 grid-template-rows 和 grid-template-columns 构造出对称的空白区域，把内容区域“挤”到中间。它适合语义化明确、结构固定的布局（比如页头/主体/页脚），但不适合动态尺寸或响应式频繁变化的场景。
必须同时定义三部分：areas + rows + columns
只写 grid-template-areas 不会生效——CSS Grid 要求显式声明行高列宽，否则所有区域默认为 auto，无法形成居中所需的留白空间。
-
grid-template-areas定义命名区域（如"header header header" "nav main aside" "footer footer footer"） -
grid-template-rows控制垂直方向留白（例如1fr minmax(400px, 1fr) 1fr） -
grid-template-columns控制水平方向留白（例如1fr minmax(800px, 1200px) 1fr）
中间那列/行用 minmax() 是关键：既保证最小宽度/高度，又允许撑开占满可用空间，两侧用 1fr 均分剩余空间，自然形成左右/上下对称。
常见错误：area 名称拼错或行列数不匹配
浏览器不会报错，但整个 grid-template-areas 会被忽略，退化成普通块流布局。检查点：
立即学习“前端免费学习笔记（深入）”；
- 每一行字符串中的单词数，必须严格等于
grid-template-columns声明的列数 - 字符串行数，必须严格等于
grid-template-rows声明的行数 - 每个 area 名称在
grid-template-areas中出现的位置，要和子元素的grid-area值完全一致（大小写、空格、连字符都不能错） - 如果某区域留空，必须用
.占位，不能省略或写空字符串
例如："header header ." "main main aside" 合法；"header header" "main main aside" 非法（第一行只有两个词，第二行三个）。
居中区域实际是“中间网格轨道”，不是某个 item
很多人误以为给某个子元素设 grid-area: center 就能居中，其实真正起作用的是它所在的那一行一列的轨道尺寸。所以：
- 居中效果由
grid-template-rows/grid-template-columns的值决定，不是justify-items或align-items - 若想让内容在居中区域内再居中，才需要在该区域的子元素上加
display: flex; justify-content: center; align-items: center - 响应式时，建议用
@media重写整套grid-template-*，而不是只改grid-area—— 后者无法改变轨道分布
复杂点在于：一旦用 grid-template-areas 定义了结构，后续调整布局就得同步更新三处声明，漏掉任何一处都会导致视觉错乱，且不易定位原因。
