justify-items控制网格项在所在单元格内的水平对齐，默认stretch会拉伸填满整列；取值start/end/center分别实现左对齐、右对齐、居中，且可被justify-self单个覆盖。
justify-items 控制的是每个网格项在其**所在单元格内**的水平对齐方式，不是整个网格在容器里的位置。它只对网格容器生效，影响所有子项，默认值是 stretch —— 所以你经常看不到“对齐效果”，其实是它默默把内容拉宽填满了整列。
justify-items 的取值和实际表现
在 LTR（从左到右）书写模式下，justify-items 的行为对应水平方向：
-
start：内容靠左对齐（单元格左侧） -
end：内容靠右对齐（单元格右侧） -
center：内容水平居中 -
stretch：默认值，内容宽度拉伸至填满单元格（注意：若内容本身有固定宽或max-width，则不会拉伸）
例如，让所有文本块在各自列中左对齐，同时避免被意外撑开：
.grid {
display: grid;
grid-template-columns: 120px 1fr 80px;
justify-items: start;
}
这时候 <img>、<button></button>、纯文本都会按自身尺寸左贴齐，不会因为 stretch 而变形或换行错位。
justify-items 和 justify-self 的优先级关系
justify-self 可以写在单个网格项上，它会覆盖容器级的 justify-items 设置。这个覆盖是精确到元素的，不干扰其他项：
- 容器设了
justify-items: center，但某个按钮要右对齐？直接给它加justify-self: end -
justify-self: self-start或self-end会跟随该元素自身的书写方向（比如 RTL 下self-start是右边），比硬写start/end更健壮 -
justify-self对display: contents的子项无效——它已经脱离盒模型，没“单元格内”可言了
容易踩的坑：为什么 justify-items 像没生效？
常见现象是设了 justify-items: center，但文字还是靠左。原因通常有这几个：
- 父容器没设
display: grid，属性被忽略（检查 computed style 中是否识别该声明） - 网格项本身设置了
width: 100%或flex: 1类样式，强行占满，掩盖了对齐效果 - 单元格列宽太小，内容溢出或换行，视觉上“看不出居中”（可临时加
background: #eee看单元格真实范围） - 误以为它能控制整个网格在容器中的水平位置——那是
justify-content的事，不是justify-items
真正需要它起效的前提是：网格项有明确的内在尺寸（比如图片原始宽、文字自然宽），且单元格宽度大于内容宽。
最常被忽略的一点：justify-items 的轴向绑定的是**主轴方向**，而主轴由 grid-auto-flow 和 grid-template-rows/columns 共同决定；如果用了 grid-auto-flow: column，那 justify-items 就变成控制“垂直方向”对齐了——但这种情况极少，日常开发中按“水平对齐”理解足够可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
