justify-content: space-between 在页脚无效是因为列轨道总宽等于容器宽，无剩余空间可分配；需用 repeat(auto-fit, minmax()) 实现响应式列数，并配合 grid-template-areas、text-align: center 等方案适配多端。
为什么 justify-content: space-between 在页脚里总没反应
不是写错了，是它根本没机会生效。Grid 的 justify-content 作用对象是列轨道整体，不是子元素；而页脚容器通常设了 width: 100% 和 grid-template-columns: 1fr 1fr 1fr 这类自适应列，结果列总宽刚好等于容器宽——没剩余空间可“分”，属性直接被忽略。
常见误判点：
- 用 DevTools 查
computed width，确认容器宽度是否真大于列轨道总和 - 响应式断点下
grid-template-columns变成单列（如1fr），space-between至少需要两个轨道才起作用 - 误把 Grid 当 Flex 用：想靠容器推子项，实际该用
justify-self或grid-column控制单个格子
repeat(auto-fit, minmax()) 是页脚自适应的核心写法
写死 repeat(3, 1fr) 在小屏上必然挤成窄条，真正响应式的列数得由浏览器自动算——靠 minmax() 定义每列最小宽度，auto-fit 负责收缩空轨道并拉伸可用列。
实操建议：
- 基础写法：
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)))，小屏下自动退为单列，大屏均分 - 列内容高度不一致？补上
grid-auto-rows: 1fr，否则有的区块高、有的矮，视觉割裂 - 最小值不能拍脑袋定：用 DevTools 拖拽容器宽度，观察文字何时开始换行或溢出，取那个临界值作
minmax()的下限 - Safari 10.1–12.1 不支持
auto-fit，需加降级：@supports not (display: grid) { ... }或回退到 Flex
多栏目宽度不同但又要响应式？别硬写比例，用 grid-template-areas
要让“品牌区”宽、“链接区”窄，又不想在小屏破坏堆叠顺序，grid-template-columns: 2fr 1fr 1fr 这种写法会卡死列数，正确解法是语义化区域绑定。
操作步骤：
- 先定义布局模板：
grid-template-areas: "logo links contact social" - 给对应元素加
grid-area: logo、grid-area: links等，名字必须完全匹配（大小写+空格） - 小屏时用
@media改模板为"logo" "links" "contact" "social"，自动垂直堆叠 - 需要跨整行的区块（如版权栏），用
grid-column: 1 / -1，别用span——后者在auto-fit下轨道数动态变，容易错位
移动端对齐别硬拗 space-between，改用 text-align: center
当页脚从三列变成单列，还执着于让子项左右撑开，只会触发文本换行、高度突变或点击区缩水。最稳的收拢方式是放弃横向分布逻辑，直接切为垂直流 + 居中。
关键点：
- 媒体查询里写：
@media (max-width: 768px) { .footer { grid-template-columns: 1fr; text-align: center; } } - 每列内部用
display: flex; flex-direction: column; gap: 0.5rem控制链接间距，比margin-bottom更可控 - 颜色层级靠
opacity降噪，比如主标题color: white; opacity: 1，辅助文字opacity: 0.7，避免在 OLED 屏上色差翻车
minmax() 的最小值是否贴合真实内容宽度——写了 minmax(180px, 1fr)，但某列标题含 5 个汉字加图标，180px 根本塞不下，结果换行撑高整行，反而破坏对齐。这一步必须拖动浏览器宽度实时测，不能只看设计稿。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
