页脚用 Grid 实现响应式需三要素：repeat(auto-fit, minmax()) 动态列数、grid-template-areas 语义化布局、Flex 降级 fallback；justify-content: space-between 在页脚无效，因其作用于列轨道整体而非常见误解的子元素间距。
直接说结论：页脚用 Grid 实现“复杂且全网响应式”，核心不是写更多媒体查询，而是靠 repeat(auto-fit, minmax()) + grid-template-areas + 降级 fallback 三者配合；justify-content: space-between 在页脚里基本没用，别白费劲去调它。
为什么 justify-content: space-between 在页脚里总没反应
不是你写错了，是它根本没空间可分。Grid 的 justify-content 作用对象是「所有列轨道组成的整体」，而页脚容器通常设了 width: 100% 和类似 grid-template-columns: 1fr 1fr 1fr 的写法——列总宽刚好等于容器宽，没剩余空间，“分”个啥？
- 用 DevTools 查
Computed面板里的width，确认容器宽度是否真大于列轨道总和 - 小屏下
grid-template-columns变成单列（比如1fr），space-between至少需要两个轨道才生效 - 想推子元素？那是 Flex 的思路；Grid 里该用
justify-self或grid-column控制单个格子
怎么让列数随屏幕自动变化，而不是写死 repeat(4, 1fr)
写死列数在小屏上必然挤成窄条，视觉和可访问性都崩。真正响应式的列数得由浏览器动态算出来，关键就是 minmax() 和 auto-fit 的组合。
-
minmax(250px, 1fr)表示每列最小 250px、最大均分剩余空间；小屏撑不开就自动减少列数 - 选
auto-fit而非auto-fill：前者会合并空轨道并拉伸可用列，后者保留空位，页脚场景几乎总是用auto-fit - 别漏
grid-auto-rows: 1fr，否则不同栏目内容行数不一（比如“友情链接”有 6 行、“联系方式”只有 1 行），高度错乱 - 最小值不能拍脑袋定：拖拽浏览器窗口，观察文字何时开始换行或溢出，取那个临界宽度作
minmax()下限
怎么让不同栏目宽度不同，又不破坏响应逻辑
硬写 grid-template-columns: 2fr 1fr 1fr 看似省事，实则卡死列数，小屏照样崩。语义化区域绑定才是正解。
立即学习“前端免费学习笔记（深入）”；
- 用
grid-template-areas: "logo links contact social"定义布局骨架 - 给对应元素加
grid-area: logo、grid-area: links等，名字必须和grid-template-areas字符串完全一致（大小写、空格都不能错） - 再配合
grid-template-columns给不同区域分配弹性比例，例如：grid-template-columns: minmax(300px, 2fr) minmax(180px, 1fr) minmax(180px, 1fr) minmax(120px, 1fr) - 小屏时自动折行为
"logo" / "links" / "contact" / "social"，顺序自然堆叠，无需额外 media query
老版 Safari（10.1–12.1）里页脚错位或不渲染怎么办
Safari 这些版本对 auto-fit 和 minmax() 支持不全，会退化成单列甚至空白。必须加降级方案，不能只靠 @supports 包一层完事。
- 先写 Flex fallback：
display: flex; flex-wrap: wrap;，子项设flex: 1 1 200px - 再用
@supports (display: grid)把 Grid 样式包在里面，避免老内核解析出错 - 测试时打开 Safari 开发者工具 → “实验性功能” → 关掉 “CSS Grid Layout”，看是否回退到 Flex 布局且正常换行
- 跨列区块慎用
grid-column: span 2：auto-fit下轨道数动态变，大屏占半行、小屏占满整行，容易拉高整行高度；改用grid-column: 1 / -1更稳
最常被忽略的是 minmax() 里的最小值没结合真实内容测——比如写了 minmax(120px, 1fr)，但“关于我们”文字在 160px 宽度就开始换行，结果小屏下文字挤成两行，高度突兀跳变。实际项目里，这个值必须动真格地拖窗口测，不是凭感觉估的。
