先记住这个答案
网格容器可能比显式轨道组更宽或更高。列轨、行轨和 gap 的尺寸算完后，如果还有正的剩余空间，可以用 justify-content 沿行内轴放置整组列轨，用 align-content 沿块轴放置整组行轨。center 将轨道组移到中间，space-between 把额外空间分散到相邻轨道之间。它们操作的是轨道组，不是每个格子内的项目。
justify-content对齐整组列轨align-content对齐整组行轨space-between把剩余空间放在轨道之间fr先参与尺寸计算，可能不留空白
固定列留出可见空白
假设容器宽 600px，两个固定列各 100px，原有 gap 为 20px，轨道组只占 220px，还剩 380px。justify-content: center 会把整个 220px 的轨道组居中；space-between 会在两列之间分配那 380px，使两列分别贴近容器两侧。项目仍可在各自的 100px 轨道内按 justify-items 对齐。
.toolbar {
display: grid;
width: 600px;
grid-template-columns: 100px 100px;
gap: 20px;
justify-content: space-between;
}
/* 两列靠向两端，剩余空间分布在列轨之间 */这不意味着计算样式中的 column-gap 变成 400px。原有 20px 沟槽仍在，额外空间来自轨道整体分布。跨两列的项目可能覆盖两列之间的全部距离，布局后观察其宽度时要把这部分算进去。
为什么设置后没变化
若列模板是 1fr 1fr，弹性轨道往往已经把可用宽度分完，justify-content 没有剩余空间可移动。类似地，容器没有明确高度而随内容自然长高时，行轨总高可能刚好等于容器内容高度，align-content: center 也不会有可见效果。
如果轨道总尺寸已经大于容器，问题是溢出，而不是正的自由空间分配。此时不要期待 space-between 把宽度压回容器；应检查固定列、内容最小尺寸和横向滚动策略。行内轴与块轴依书写模式确定，不总等于物理水平和垂直。
例如容器宽 800px，两列固定各 200px，中间 20px 沟槽，轨道组只占 420px，剩余 380px 才能交给 justify-content 分配。若把两列改成 1fr 1fr，它们本来就会吸收自由空间，此时再写 justify-content: space-between 常看不出变化。先检查轨道的实际宽度，再判断是要调整轨道本身，还是要移动整组轨道。
容易答错的地方
- 用
justify-items调整两列之间的距离 - 它对齐的是格子里的项目；要移动整组列轨，应使用
justify-content。 - 认为
space-between一定会产生更大空隙 - 只有存在正的剩余空间才可分配。轨道已经占满或溢出时，它不会创造新的可用宽度。
面试官还会怎么问？
怎么让固定宽度的网格整体居中？
设置 justify-content: center；前提是容器行内轴比轨道组更宽。
align-content 为什么在某页面无效？
通常先看容器块轴是否有确定且大于轨道总高的尺寸；没有剩余空间就无法移动。
space-between 与 gap 的区别？
gap 是声明的轨道沟槽，space-between 把额外自由空间分配在轨道之间。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。