justify-items用于设置网格项在行轴上的对齐方式，可选值有start、end、center、stretch；它作用于整个容器，但可通过justify-self单独覆盖某个项目。
CSS 中的 justify-items 属性用于控制网格容器中网格项在行轴（即水平方向，x 轴）上的对齐方式。它作用于整个网格容器，影响容器内所有网格项的对齐行为。
justify-items 的基本语法
你可以在定义网格容器的父元素上使用该属性：
.container {
display: grid;
justify-items: start | end | center | stretch;
}
可选值及其效果
以下是 justify-items 支持的主要取值及它们的行为：
- start：网格项紧贴所在网格区域的起始边缘（从左开始，LTR 模式下）。
- end：网格项紧贴所在网格区域的结束边缘（右侧）。
- center：网格项在其网格区域内水平居中。
- stretch：默认值。网格项拉伸以填满整个网格区域（忽略 margin:auto 的影响）。
实际示例说明
假设有一个 2x2 的网格布局：
立即学习“前端免费学习笔记（深入）”；
.grid-container {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: 80px 80px;
justify-items: center;
}
.grid-item {
background: lightblue;
}
此时每个网格项都会在其各自的列单元格中水平居中对齐。
如果将 justify-items: start，所有项目会靠左对齐；设为 end 则靠右；设为 stretch 会占满整个列宽（除非设置了固定宽度）。
与 justify-self 的关系
justify-items 设置全局对齐方式，但你可以用 justify-self 在单个网格项上覆盖这个行为。例如：
.item-special {
justify-self: start;
}
这个特定项就会向左对齐，即使容器设置了 justify-items: center。
