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 会被忽略，退化成普通块流布局。检查点：
