align-items控制网格项在交叉轴（默认垂直）的对齐，justify-items控制主轴（默认水平）的对齐，两者用于统一设置，而align-self和justify-self可单独调整特定项的对齐方式。
在使用 CSS Grid 布局时，align-items 和 justify-items 是控制网格项（grid items）在单元格内对齐方式的重要属性。它们分别处理交叉轴和主轴方向的对齐，理解它们的区别和用法能更精准地控制布局。
align-items：控制垂直对齐（交叉轴）
该属性作用于网格容器，定义所有网格项在其单元格内的交叉轴（cross axis）上的对齐方式。在默认的行排列模式下，交叉轴是垂直方向。
常用值包括：- start：元素在交叉轴起点对齐（顶部）
- end：元素在交叉轴终点对齐（底部）
- center：元素在交叉轴居中对齐
- stretch：元素拉伸以填满整个单元格（默认值）
例如，让所有子元素在单元格中垂直居中：
css
.grid-container {
display: grid;
align-items: center;
}
justify-items：控制水平对齐（主轴）
该属性定义网格项在其单元格内的主轴（main axis）方向上的对齐方式。在默认的行排列下，主轴是水平方向。
立即学习“前端免费学习笔记（深入）”；
常用值包括：
- start：元素在主轴起点对齐（左侧，LTR）
- end：元素在主轴终点对齐（右侧）
- center：元素在主轴方向居中
- stretch：元素拉伸填满单元格（默认值）
例如，让所有子元素在单元格中水平居中：
css
.grid-container {
display: grid;
justify-items: center;
}
单独控制某个子元素：align-self 与 justify-self
如果只想调整某个特定网格项的对齐方式，可以使用 align-self 和 justify-self，它们的作用与上述两个属性相同，但只针对单个子元素。
示例：让某个子项在单元格中右对齐：
css
.grid-item-special {
justify-self: end;
}
基本上就这些。掌握 align-items 和 justify-items 能帮你快速统一网格项的内部对齐，而通过 -self 属性可灵活处理个别元素。不复杂但容易忽略细节，尤其是在不同书写模式或网格方向下轴的方向会变化，但大多数情况下按“垂直 vs 水平”理解即可。
