align-items 和 justify-items 分别控制网格项在列轴和行轴的对齐方式，前者处理垂直对齐（如 start、center、end、stretch），后者处理水平对齐，组合使用可实现单元格内精准定位；例如设置两者均为 center 可使所有项目居中显示，而 align-self 与 justify-self 可覆盖单个项目的对齐行为，提升布局灵活性。
CSS Grid 布局中，align-items 和 justify-items 是两个用于控制网格项（grid items）在单元格内对齐方式的关键属性。它们分别处理交叉轴（列方向）和主轴（行方向）的对齐，组合使用可以精确控制元素在网格区域中的位置。
align-items：控制垂直对齐（沿列轴）
该属性作用于网格容器，定义所有网格项在其单元格内的垂直对齐方式。适用于单个网格区域的高度超出内容所需时的对齐控制。
常用值包括：- start：对齐到单元格顶部
- end：对齐到单元格底部
- center：垂直居中
- stretch：拉伸以填满整个单元格（默认值）
justify-items：控制水平对齐（沿行轴）
该属性定义网格项在其单元格内的水平对齐方式。
常用值包括：- start：对齐到单元格左侧
- end：对齐到单元格右侧
- center：水平居中
- stretch：拉伸填满单元格（默认）
组合使用示例
假设有一个 2x2 的网格容器，希望所有子元素在各自单元格中居中显示：
立即学习“前端免费学习笔记（深入）”；
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 100px 100px;
align-items: center; /* 垂直居中 */
justify-items: center; /* 水平居中 */
}
此时每个网格项都会在其单元格内完全居中。若将 align-items 设为 start，justify-items 设为 end，则所有元素会出现在单元格的右上角。
与 align-self / justify-self 的关系
如果某个网格项需要特殊对齐，可单独设置 align-self 或 justify-self，它们会覆盖容器的 align-items 和 justify-items 设置。
例如：
.grid-item-special {
justify-self: start; /* 即使容器设为 center，该项仍靠左 */
}
基本上就这些。合理搭配 align-items 与 justify-items，能快速实现网格内部的一致对齐效果，提升布局控制力。不复杂但容易忽略细节。
