justify-content: space-between 在 grid 中不生效，是因为显式定义的列轨道（如 grid-template-columns: 200px 200px 200px）会固定列宽，space-between 仅在总列宽小于容器宽时分配剩余空间，无法影响换行后各行对齐；真正实现“视觉两端对齐+最后一行左对齐”的方案是使用 repeat(auto-fit, minmax(200px, 1fr))) 让列弹性伸缩填满容器。
为什么 justify-content: space-between 在 Grid 中不生效？
很多人给 display: grid 容器加了 justify-content: space-between，发现只在第一行起作用，后面几行（尤其是最后一行）完全没反应。这不是写错了，而是 Grid 的列轨道一旦由 grid-template-columns 显式定义（比如 100px 100px 100px），子项就严格按轨道位置放置，space-between 只会在「所有列轨道总和小于容器宽度」时分配剩余空间——它不改变轨道本身，也不影响换行后各行的内部对齐逻辑。
常见错误现象：
- 设了
grid-template-columns: 200px 200px 200px，但窗口缩小时，三列被压缩甚至重叠，space-between彻底失效 - 最后一行只剩一个子项，它卡在最左边，而不是“两端对齐”或“左对齐”，因为没有空闲空间可分配
用 repeat(auto-fit, minmax()) 替代固定列数
真正能实现“视觉上两端对齐 + 最后一行自然左对齐”的，是让 Grid 自动计算列数，并靠弹性轨道吃掉空闲空间。核心不是靠 justify-content 推元素，而是让列自己伸缩填满。
推荐写法：
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))));
gap: 16px;
}
说明：
-
minmax(200px, 1fr)表示每列最小 200px，最大均分剩余空间；auto-fit会让空轨道自动收缩消失 - 当容器宽度刚好容纳 3 列时，第 4 个子项会换行，新行从左开始排列，右侧留白——这正是“最后一行左对齐”的默认行为
- 不需要额外 hack，也不依赖
justify-content，兼容性好（Chrome/Firefox/Edge/Safari 15.4+ 均支持）
如果必须用固定列数，怎么强制最后一行左对齐？
当设计稿明确要求每行 4 列、且不允许列宽变化（比如卡片有固定尺寸+边框），就不能靠 minmax() 弹性伸缩。此时 Grid 本身不提供“最后一行特殊对齐”的控制接口，得退回到布局层面干预。
可行做法：
- 给容器加
justify-content: start：确保所有行都左对齐（不是居中或拉伸），右侧统一留白 - 避免使用
grid-auto-rows：它会让所有行等高，干扰自然布局；让行高由内容决定更可控 - 若需视觉“撑满”，可用伪元素占位：
.grid::after { content: ""; grid-column: -1 / -1; }，但仅在已知总项数模 4 余数时才精准——实际项目中很少这么做，因不可维护
注意：justify-content: start 在 Safari 14.1 之前不支持多行对齐，旧版会回退为 stretch；可用 @supports (justify-content: start) 检测并降级到 Flex + 伪元素方案。
别混淆 justify-content 和 justify-items
有人试图用 justify-items: start 控制单个子项对齐，但这只影响子项在其轨道内的对齐（比如文字左对齐），和“整行是否贴左”无关。真正管“行整体位置”的，只有 justify-content（主轴）和 align-content（交叉轴）。
容易被忽略的关键点：
-
justify-content对 Grid 生效的前提是：容器设置了grid-template-columns（哪怕只是repeat(3, 1fr)），否则它会被忽略 - 如果用了
grid-column: span 2这类跨列声明，会破坏列数整除关系，导致auto-fit计算错乱，最后一行可能意外右偏 - 移动端小屏下，
gap的像素值可能吃掉左侧预留空间，Safari 旧版尤其明显；建议搭配padding-left微调
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
