使用CSS Grid可通过justify-items、align-items控制项目在单元格内的对齐，justify-content、align-content调整整个网格在容器中的位置，结合justify-self和align-self可单独设置某项目的对齐方式。
使用 CSS Grid 调整多行多列元素的对齐方式，主要依赖于容器上的 justify-items、align-items、justify-content 和 align-content 属性。这些属性分别控制项目在行轴和列轴上的对齐行为。
1. 设置网格容器的基本结构
首先定义一个 grid 容器，并设置行列布局：
1
2
3
4
5
6
上面是一个 3 列 2 行的网格，每个格子之间有间隙。
2. 控制单个项目的对齐（justify-items 与 align-items）
这两个属性作用于容器，影响所有子项目在单元格内的对齐方式。
立即学习“前端免费学习笔记（深入）”；
- justify-items：控制项目在单元格内沿行轴（横向）的对齐
- align-items：控制项目在单元格内沿列轴（纵向）的对齐
常用值包括：
start、
end、
center、
stretch
例如让所有项目居中对齐：
.grid-container {display: grid;
justify-items: center;
align-items: center;
}
这样每个格子内的内容都会在水平和垂直方向居中。
3. 控制整体网格在容器中的位置（justify-content 与 align-content）
当网格的总大小小于容器时，可以用这两个属性调整整个网格的分布。
- justify-content：控制网格整体在行轴上的对齐（列之间的空间分配）
- align-content：控制网格整体在列轴上的对齐（行之间的空间分配）
常见值：
start、
end、
center、
space-between、
space-around、
space-evenly
比如让网格在容器中水平垂直居中：
.grid-container {width: 80vw;
height: 200px;
justify-content: center;
align-content: center;
}
4. 单独调整某个项目的位置
如果只想调整某个格子的内容，可以使用项目自身的 justify-self 和 align-self。
例如让第2个格子的内容右对齐并顶部对齐：
.item-2 {justify-self: end;
align-self: start;
}
这不会影响其他项目，灵活性更高。
基本上就这些。通过组合使用 justify、align 相关属性，你可以精确控制多行多列布局中每个层级的对齐方式。关键是分清 items 是针对格子内内容，content 是针对整个网格块的位置。不复杂但容易忽略细节。
