justify-items控制网格项在行内轴（水平）的对齐，align-items控制块轴（垂直）对齐，两者分别处理横向和纵向布局。
justify-items 和 align-items 是 css Grid 布局中的两个对齐属性，用于控制网格容器中子元素（网格项）在不同轴上的对齐方式。虽然名称相似，但它们作用的轴不同，理解这一点是掌握 Grid 布局对齐的关键。
justify-items：控制行内轴（横轴）对齐
justify-items 用于设置网格项在其单元格内沿 行内轴（inline axis） 的对齐方式，也就是水平方向（从左到右或右到左），具体取决于书写模式。
常见取值包括：
- start：对齐到单元格的起始边缘（通常是左侧）
- end：对齐到单元格的结束边缘（右侧）
- center：在单元格内水平居中
- stretch：拉伸以填满整个单元格（默认值）
例如，在一个从左到右书写的语言中，justify-items: center; 会让所有子元素在各自的网格单元格中水平居中。
align-items：控制块轴（纵轴）对齐
align-items 控制的是网格项在其单元格内沿 块轴（block axis） 的对齐，也就是垂直方向（从上到下）。
立即学习“前端免费学习笔记（深入）”；
常用值与 justify-items 类似：
- start：顶部对齐
- end：底部对齐
- center：垂直居中
- stretch：纵向拉伸填满单元格（默认）
设置 align-items: center; 后，所有子元素会在其所在单元格中垂直居中显示。
简单记忆方法
可以这样理解：
- justify- 对应 横轴（水平方向）——“justify”让人联想到文本两端对齐，是横向操作
- align- 对应 纵轴（垂直方向）——“align”在这里处理上下对齐
这与 Flexbox 中的主轴和交叉轴概念有相似之处，但在 Grid 中，这两个属性直接作用于网格容器，影响所有子项。
基本上就这些。只要分清横轴和竖轴，justify-items 和 align-items 的用途就很清晰了。实际使用时结合 grid 容器的定义，能更精准地控制布局对齐效果。
以上就是css布局中justify-items与align-items