justify-items不生效的首要原因是容器未正确启用grid模式，必须确认computed display为grid或inline-grid，且子元素为直接子项、无justify-self覆盖、列轨道有效。
justify-items 不生效？先确认容器是 Grid 模式
最常见的问题是写了 justify-items: center 却没反应，根本原因几乎都是容器没真正进入 Grid 布局。CSS Grid 的对齐属性只在 display: grid 或 display: inline-grid 的容器上起作用。仅写 grid-template-columns 或 gap 不会自动触发 Grid 模式。
检查点包括：
- 父元素是否被
float、display: flex或display: inline-block干扰，导致 Grid 容器无法正常渲染 - 用浏览器开发者工具查看 computed styles，确认
display确实为grid - 避免在 Grid 容器上同时设置
text-align期望影响内容对齐——它对 Grid 项无效
justify-items 和 justify-content 完全不是一回事
justify-items 控制每个网格项（grid item）**在自己单元格内**的水平对齐；而 justify-content 控制的是**整个网格轨道集合**（即所有列组成的“大盒子”）在父容器中的水平位置。两者可以共存，但作用层级不同。
典型误用场景：
- 想让“只有 2 个子项的一行”在宽容器中居中，却只设
justify-items: center→ 实际需要的是justify-content: center - 设了
justify-items: stretch（默认值），但子项有width: 200px→ 拉伸失效，因为显式宽度优先级更高 - 在 RTL 页面（
direction: rtl）里硬写justify-items: left→ 浏览器可能忽略或报错，应改用start/end
取值行为差异：stretch 是默认值，但常被误解
justify-items 的默认值是 stretch，意味着子项会尝试填满整个单元格的行内轴方向（通常是宽度）。但这不等于“强制撑开”，它受以下限制：
- 子项设置了
width、max-width或min-width时，stretch会被压制 - 子项是替换元素（如
<img>）且未设宽高，stretch可能表现为按固有尺寸居中，而非拉伸 -
start在 LTR 下是左对齐，在 RTL 下是右对齐；用left/right属于过时写法，部分浏览器已不支持
若需统一左对齐且不拉伸，显式写 justify-items: start 比依赖默认更可靠。
要单独控制某个项目？别动容器，用 justify-self
当大部分网格项需居中，但其中一个按钮必须右对齐时，不要在容器上反复切换 justify-items，直接在该子项上加：
.submit-btn {
justify-self: end;
align-self: center;
}
justify-self 优先级高于 justify-items，且可独立设置。注意：
- 它不能用于
display: contents的子项——这类元素已脱离盒模型 -
self-start/self-end会按子项自身的书写模式对齐，适合嵌套 RTL 内容，但日常开发中start/end更稳定 - 和
align-self组合使用时，place-self: center end是等效简写，但顺序是先align后justify，容易写反
最易被忽略的点：justify-items 的效果只有在网格项有“可对齐空间”时才明显——比如列宽固定为 100px，里面放一段短文字，center 才看得见；如果列是 1fr 且子项本身占满，就看不出区别。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
