justify-content: space-between 在 grid 页脚中失效，因其作用对象是列轨道整体而非子元素；需容器宽度大于列总宽且至少两列才生效，页脚常用 1fr 自适应布局导致无剩余空间。
justify-content: space-between 在 Grid 页脚中几乎总是失效——不是写法错，而是它根本没机会生效。
为什么页脚里写 justify-content: space-between 没反应
页脚容器通常设了 display: grid 和类似 grid-template-columns: 1fr auto 1fr 的结构，但 justify-content: space-between 要起作用，必须满足两个硬条件：grid-template-columns 所有列宽之和 小于 容器宽度，且容器有明确宽度（比如 width 或 max-width）。而页脚常见写法是 width: 100% 或默认块级宽度，列轨道又用 1fr 自动撑满，结果就是“没剩余空间可分”，属性直接被忽略。
- 检查计算后的列总宽：打开 DevTools → Elements → 查看 computed width，确认是否等于容器宽度
- 响应式断点下，
grid-template-columns可能从1fr auto 1fr切换为1fr单列，此时只剩一个轨道，space-between失效（它至少需要两个轨道） - 如果用了
inline-grid，容器本身不占整行，justify-content才可能生效，但页脚一般不需要这种行为
真正能控制页脚子项分布的其实是 gap + justify-content: start
想让页脚三部分（如 logo / nav / social）分别钉在左、中、右，justify-content: space-between 是错的工具；正确做法是放弃“靠容器对齐”，改用网格轨道自身定位：
- 把页脚声明为
display: grid，并显式定义三列：grid-template-columns: max-content 1fr max-content - 给中间列（nav）加
justify-self: center，左右两列默认justify-self: start和justify-self: end - 用
gap控制列间距离，而不是依赖justify-content分配空白 - 移动端收拢时，用
@media改为grid-template-columns: 1fr+text-align: center，比试图让space-between在单列下工作更可靠
justify-content: space-between 在 Grid 中只对“整行轨道块”起作用
很多人误以为它能像 Flex 那样推子元素，但它实际操作对象是 grid-template-columns 生成的列轨道整体。例如：
.footer {
display: grid;
grid-template-columns: 100px 100px 100px;
width: 500px; /* 必须显式设宽，且大于300px */
justify-content: space-between; /* 此时才生效：三列轨道整体两端贴边，中间留空 */
}
一旦列定义变成 repeat(auto-fit, minmax(200px, 1fr)))，或容器宽度随视口变化而刚好被填满，justify-content 就彻底静默——这不是 bug，是规范行为。
最常被忽略的一点：页脚内容高度不固定时，align-content: space-between 也一样无效，除非你同时设了固定 height 且所有 grid-template-rows 高度之和明显小于它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
