align-items和justify-items分别控制网格项在纵轴和横轴的对齐方式，前者处理垂直方向，后者处理水平方向；常用值包括start、end、center和stretch（默认），可通过align-self与justify-self单独调整特定子元素的对齐行为，实现精确布局控制。
在CSS Grid布局中，控制子元素（网格项）的对齐方式主要依靠 align-items 和 justify-items 两个属性。它们分别处理交叉轴（纵轴）和主轴（横轴）上的对齐行为，帮助你精确控制网格单元内子元素的位置。
align-items：控制纵轴对齐（垂直方向）
align-items 决定网格项在其网格区域内的垂直对齐方式。它作用于每一行网格区域的交叉轴方向（通常为垂直方向）。
常用取值包括：- start：对齐到网格区域的起始边缘（上边）
- end：对齐到网格区域的结束边缘（下边）
- center：在网格区域内垂直居中
- stretch：拉伸以填满整个网格区域（默认值）
示例：
.grid-container {
display: grid;
grid-template-columns: 100px 100px;
align-items: center; /* 所有子元素垂直居中 */
}
justify-items：控制横轴对齐（水平方向）
justify-items 控制网格项在其网格区域内的水平对齐方式，作用于主轴方向（通常是水平方向）。
立即学习“前端免费学习笔记（深入）”；
常用取值包括：- start：左对齐（LTR环境下）
- end：右对齐
- center：水平居中
- stretch：拉伸填满网格区域（默认值）
示例：
.grid-container {
display: grid;
grid-template-columns: 100px 100px;
justify-items: center; /* 所有子元素水平居中 */
}
单独控制某个子元素：align-self 与 justify-self
如果只想调整某个特定子元素的对齐方式，可以使用 align-self 和 justify-self，它们会覆盖容器上设置的 align-items 和 justify-items。
例如：
.grid-item-2 {
align-self: start;
justify-self: end;
}
这会让第二个子元素在垂直方向靠上、水平方向靠右，不受容器统一设置的影响。
基本上就这些。合理使用 align-items 和 justify-items，再配合 align-self 与 justify-self，就能灵活控制Grid中每个子元素的对齐位置，实现精准布局。不复杂但容易忽略细节，比如默认拉伸行为可能影响预期效果，记得检查是否需要关闭 stretch。
