答案：justify-content控制水平对齐，align-content控制垂直行分布，align-items控制项目在单元格内垂直对齐；三者结合可实现网格整体居中与内容均衡布局。
在使用 CSS Grid 布局时，justify-content、align-content 和 align-items 是控制网格容器内整体对齐和项目对齐的关键属性。合理结合它们，可以让布局更精确、响应更自然。
justify-content：控制列轴方向的对齐（水平方向）
该属性作用于网格轨道（grid tracks）在行容器内的对齐方式，适用于行轴方向（即主轴），当网格总宽度小于容器宽度时生效。
常见取值包括：- start：靠左对齐（默认）
- end：靠右对齐
- center：居中对齐
- space-between：两端对齐，中间间距相等
- space-around：每个项目周围有相等空间
- space-evenly：所有项目间及边缘间距完全相等
例如，想让整个网格内容在容器中水平居中：
.container {
display: grid;
grid-template-columns: repeat(3, 100px);
justify-content: center;
}align-content：控制行轴方向的对齐（垂直方向）
与 justify-content 类似，但作用于行之间的垂直分布。当网格总高度小于容器高度时，决定行轨道如何在容器中排列。
立即学习“前端免费学习笔记（深入）”；
典型值：- start：顶部对齐（默认）
- end：底部对齐
- center：垂直居中
- space-between：首尾行贴边，其余等距分布
- space-around：每行上下有均等空间
- space-evenly：所有行之间和边缘间距一致
常用于多行网格，比如：
.container {
display: grid;
grid-template-rows: repeat(2, 80px);
height: 400px;
align-content: center;
}align-items：控制网格项在单元格内的垂直对齐
这个属性设置每个网格项在其所在网格区域内的对齐方式，影响的是单个项目的交叉轴（通常是垂直方向）对齐。
- stretch：拉伸填满单元格（默认）
- start：顶部对齐
- end：底部对齐
- center：垂直居中
如果你不希望项目被拉伸，可以这样设置：
.container {
display: grid;
grid-template-columns: repeat(3, 150px);
align-items: center;
}此时所有子元素会在各自单元格中垂直居中。
三者结合使用的典型场景
当需要实现一个居中且间距均匀的网格布局时，可以同时使用这三个属性：
.container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(2, 80px);
width: 600px;
height: 400px;
justify-content: center; / 水平居中整个网格 /
align-content: center; / 垂直居中所有行 /
align-items: center; / 每个项目在其单元格内垂直居中 /
}
这样即使容器大于网格总尺寸，内容也会真正“居中显示”，视觉上更平衡。
基本上就这些。掌握这三个属性的作用维度——容器级分布 vs 单元格内对齐，能大幅提升 Grid 布局的控制力。不复杂但容易忽略细节。
