justify-content用于控制网格轨道在水平方向的对齐方式，仅在容器有多余空间时生效。例如容器宽度大于列总宽时，设置justify-content:center可使整个网格居中；若无多余空间，则需通过margin:0 auto或外层Flexbox实现居中布局。
在使用 CSS Grid 布局时，justify-content 并不能直接用于调整“整个网格”的水平位置，除非网格容器的总列宽小于其容器宽度。它的作用是控制网格轨道（grid tracks）在行轴（即水平方向）上的对齐方式，前提是存在额外的可用空间。
理解 justify-content 的适用场景
justify-content 只有在网格容器有多余空间时才起作用。比如：你定义了固定数量的列，但这些列的总宽度小于容器宽度，这时就可以用 justify-content 来分配这些多余空间。
注意：justify-content 是作用在网格容器上的属性，不是网格项目。
常用 justify-content 值及其效果
以下值适用于 grid 容器，控制列之间的空间分布：
立即学习“前端免费学习笔记（深入）”；
- start：内容靠左对齐（默认）
- end：内容靠右对齐
- center：整体网格内容居中
- space-between：两端对齐，中间间距相等
- space-around：每个项目周围有相等空间
- space-evenly：所有项目间和边缘的空间都相等
实际示例
假设你有一个宽度较大的容器，但只用了几个固定宽度的列：
.container {display: grid;
grid-template-columns: repeat(3, 200px);
width: 100%;
justify-content: center; /* 整个3列组成的网格块居中 */
}
此时，三列总共 600px，若容器为 1200px，多出 600px 空间，justify-content: center 会将这三列整体居中显示。
常见误区与替代方案
如果你希望“整个网格”在页面中居中，而没有多余轨道空间，justify-content 不会生效。这时应考虑：
- 给网格容器设置 margin: 0 auto 并指定明确宽度
- 使用 min-width 或 max-width 控制容器尺寸
- 在外层使用 Flexbox 包裹网格容器进行对齐
基本上就这些。justify-content 调整的是网格内部轨道的水平分布，而不是容器本身的定位。正确理解它的作用范围，才能有效控制布局。
