用grid-template-columns和grid-column:span可纯CSS实现响应式页脚布局；需设display:grid与列定义，推荐repeat(auto-fit,minmax(200px,1fr)))并配gap；跨列用grid-column:span，子项横向排布用flex。
直接用 grid-template-columns + grid-column: span 就能搞定，不需要 JS 或复杂媒体查询；但列数在小屏下会塌缩成一列，这是正常行为，不是 bug。
页脚容器必须设 display: grid 且明确列定义
很多人只写 display: grid 却漏掉 grid-template-columns，结果页脚项堆成一列或溢出。实际只需一行声明即可控制基础结构：
-
grid-template-columns: repeat(4, 1fr)→ 四等分，适合中大屏 -
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)))→ 更稳妥，小屏自动退为 1–3 列 - 别用
auto-fill：它会渲染空轨道，在页脚末尾留白，视觉上像“缺一块” - 必须设
gap: 1rem（或row-gap/column-gap），否则列间紧贴，移动端尤其难读
grid-column: span 控制跨列链接组（比如“产品”下多个子项）
纯等宽列无法表达“主类目占一列、子链接占半列”的语义。这时不用改列数，而是让某些 <ul> 跨列：
- 默认每个
<section>占一列：footer > section { grid-column: span 1; } - 让“支持”和“公司”合并占一列：
footer > section:nth-child(3) { grid-column: span 2; } - 若想让某个
<ul>内部子项横向排布（如社交媒体图标），加display: flex，Grid 不干涉项目内部布局 - 注意：跨列后若内容高度不一，整行会被拉高——这是预期行为，
align-items: start可缓解
小屏下必须用 @media 改列数，不能靠 minmax() 自动兜底
minmax(200px, 1fr) 在宽度
立即学习“前端免费学习笔记（深入）”；
- 加
@media (max-width: 768px)，把列数设为repeat(2, 1fr) - 再加一层
@media (max-width: 480px)，设为1fr（单列垂直） - 别依赖
grid-auto-flow: column：它会让所有项从上到下填满第一列再换列，打乱“主类目→子项”的阅读流 - 小屏单列时，
gap建议加大到1.5rem，避免文字挤在一起
区域命名（grid-template-areas）对页脚意义不大
页脚结构固定、区域少（通常就 logo / nav / legal / social 四块），用 grid-area 反而增加维护成本。真要用，也只在 PC 端定义，移动端直接切回单列：
- PC：
grid-template-areas: "logo nav nav social" "legal legal legal legal"; - 移动端 media query 里删掉该声明，靠
grid-template-columns: 1fr+ 默认顺序就够了 - 区域名带空格或点号（如
" . social . "）虽合法，但页脚没那么多占位需求，纯属画蛇添足 - JS 动态改
style.gridTemplateAreas容易因换行符或引号格式失败，没必要
最常被忽略的是：页脚文字颜色、行高、链接下划线状态这些样式，和 Grid 布局本身无关，但一旦忘了设 a { color: inherit; text-decoration: none; }，视觉上就像“布局崩了”。
