justify-content控制网格在行轴的对齐，align-content控制列轴的对齐，二者均作用于网格容器内整体轨道与剩余空间的分布；需显式定义轨道尺寸且容器存在多余空间时才生效，常用值包括start、end、center、space-between等，正确使用可提升布局视觉平衡。
在使用 CSS Grid 布局时，justify-content 和 align-content 是控制网格容器中整体网格轨道（grid tracks）对齐方式的关键属性。它们作用于整个网格框架与容器之间的空间分配，而不是单个网格项目。理解这两个属性有助于更好地控制页面布局的视觉平衡。
justify-content：控制网格在行轴方向的对齐
justify-content 用于设置网格内容在行轴（inline axis，通常为水平方向）上如何分布剩余空间。它适用于网格容器，当所有列轨道的总宽度小于容器宽度时生效。
常用取值包括：
- start：网格靠行轴起点对齐（默认左对齐）
- end：网格靠行轴终点对齐（右对齐）
- center：网格在行轴居中对齐
- space-between：两端对齐，中间间距相等
- space-around：每个轨道周围有相等空间
- space-evenly：所有间隙完全均匀分布
示例：
立即学习“前端免费学习笔记（深入）”；
.grid-container {display: grid;
grid-template-columns: repeat(3, 100px);
width: 500px;
justify-content: center;
}
上述代码会让三列共 300px 的网格在 500px 容器中水平居中。
align-content：控制网格在列轴方向的对齐
align-content 控制网格内容在列轴（block axis，通常为垂直方向）上的对齐方式。当所有行轨道的总高度小于容器高度时，该属性生效。
可选值与 justify-content 类似：
- start：顶部对齐（默认）
- end：底部对齐 center：垂直居中对齐
- space-between：首尾行贴边，其余间距均分
- space-around：每行上下有相等空白
- space-evenly：所有垂直间隙均匀分布
示例：
立即学习“前端免费学习笔记（深入）”；
.grid-container {display: grid;
grid-template-rows: repeat(2, 80px);
height: 400px;
align-content: space-between;
}
两行共 160px 高度的网格将在 400px 高容器中上下拉伸，中间空隙占满剩余空间。
关键前提：必须定义显式网格且容器有剩余空间
justify-content 和 align-content 要起作用，需满足两个条件：
- 使用 grid-template-columns / grid-template-rows 显式定义了轨道尺寸
- 网格容器在对应轴向上存在未被占用的空间
若使用 1fr 占满容器，或未设定明确轨道，则无法产生多余空间，这两个属性将不生效。
基本上就这些。掌握 justify-content 与 align-content 的区别和应用场景，能让你更精准地控制 Grid 布局的整体排布效果。
