justify-content控制网格整体在容器中的水平位置，justify-items控制各项目在自身单元格内的水平对齐；前者作用于所有列轨道组成的整体，后者作用于每个网格项内部，二者层级不同、可共存，且justify-self可覆盖justify-items。
justify-content 控制整个网格在容器里的水平位置
它管的是“所有列轨道加起来那块内容”怎么在父容器中摆放。比如你设了 grid-template-columns: repeat(3, 100px)，总宽才 300px，但容器宽 800px，多余空间怎么分——justify-content 就决定这 500px 空白放哪。
常见值：start（左贴边，默认）、center（整体居中）、space-between（首尾贴边，中间等距）。
注意：它只在网格总宽度小于容器宽度时才可见效果；如果用了 1fr 或撑满，通常没反应。
justify-items 控制每个网格项在自己单元格里的水平对齐
它不关心网格整体在哪，只管“每个格子内部的内容”怎么摆。比如一个单元格宽 200px，里面放了个 50px 宽的按钮，默认会拉伸（stretch），但设成 justify-items: center 就会让按钮在该单元格里水平居中。
这个属性只对 Grid 生效，在 Flexbox 中完全被忽略。
可选值：start、end、center、stretch（默认）；没有 space-between 这类分布类取值。
两者能同时用，但作用层级完全不同
它们不是互斥关系，而是嵌套逻辑：
-
justify-content决定“整张表格”在页面上怎么横着放 -
justify-items决定“每个格子里的文字/按钮/图片”怎么在各自格子内横着放
典型组合场景：容器居中 + 单元格内容居中
.grid {
display: grid;
grid-template-columns: 100px 100px;
justify-content: center; /* 整个两列网格在父容器中居中 */
justify-items: center; /* 每个格子里的内容都居中 */
}
容易踩的坑：justify-items 对 grid-column: span 2 这类跨列项也生效，但它只按该项所在的合并后单元格计算对齐范围，不是按整个网格宽度。
别和 justify-self 搞混
justify-self 是单个网格项的覆盖设置，优先级高于 justify-items。比如全局设了 justify-items: start，但某个按钮加了 justify-self: end，那它就会靠右，其他不变。
也就是说：justify-items 是批量设置默认行为，justify-self 是个别微调。实际项目中，先定好 justify-items 基线，再用 justify-self 处理例外，比全写 justify-self 更易维护。
真正容易被忽略的是：这两个属性都不影响网格轨道（track）本身的尺寸或位置，只影响内容在已有轨道内的对齐。想调整轨道间距，得看 gap 或 grid-column-gap。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
