页脚用 grid-template-areas 最稳妥，因其通过语义化区域名抽象布局，避免 grid-column 手动跨列导致的响应式错位、隐式网格不一致、内容撑出及嵌套失效等问题。
页脚用 grid-template-areas 最稳妥，别硬套 grid-column 手动算跨列 —— 容易因内容长度变化或响应式断点错位。
为什么页脚不适合只靠 grid-column: span 定位
页脚区域常含多个不等宽模块（如 logo、版权信息、社交链接、快捷导航），手动写 grid-column: 1 / -1 或 grid-column: span 3 看似简单，但一旦加响应式规则（比如移动端堆叠）、内容动态插入、或父容器列数变更，span 值就极易失效。浏览器按隐式网格计算起止线，结果不可控。
- 父容器没设
grid-template-columns时，span行为依赖浏览器默认隐式轨道，各引擎表现不一致 - 内容文字变长导致自动换行后，
grid-column不会重算列跨度，视觉上“撑出”容器 - 嵌套页脚（比如主页脚 + 子模块页脚）时，内层
span仍相对于外层列轨道，不是自身容器
用 grid-template-areas 写页脚的三步落地法
把页脚当成一个独立网格容器，用区域名抽象语义，而非坐标。关键在「列对齐」和「空白占位」。
- 给页脚容器设
display: grid，并显式声明列划分，例如：grid-template-columns: 1fr minmax(200px, 300px) 1fr - 用
grid-template-areas描述结构，每行单词数必须一致，缺位用.：grid-template-areas: "logo nav copyright" "logo social copyright" - 子元素用
grid-area匹配区域名，大小写敏感、不能带中划线：.footer-logo { grid-area: logo; }
响应式页脚切换时最容易漏掉的一件事
媒体查询里改了 grid-template-areas，但忘了同步更新子元素的 grid-area 值 —— 浏览器不会报错，而是静默让该元素退回文档流，页脚直接塌成一列普通块级元素。
立即学习“前端免费学习笔记（深入）”；
- 桌面端写
"logo nav copyright"，移动端想堆叠，得改成："logo" "nav" "copyright"，且确保每个对应元素的grid-area仍是logo、nav、copyright - 如果某模块只在桌面显示（比如右上角客服入口），不要删掉区域名，而是在移动端用
grid-area: .把它“挖空”，否则区域名缺失会导致整行声明无效 - 复制粘贴区域字符串时，注意全角空格、换行符是否混入；可用
getComputedStyle(footerEl).gridTemplateAreas在控制台验证是否解析成功
真正麻烦的不是写几行 CSS，而是区域名一旦拼错或大小写不一致，浏览器完全不提示，只当那条规则不存在 —— 这种静默失效，在页脚这种低频修改区域里最难排查。
