justify-items控制每个网格项在各自单元格内的水平对齐，align-content控制整个网格轨道在容器交叉轴上的分布；前者作用于单个项内部，后者需多轨道+剩余空间才生效。
justify-items 和 align-content 的作用对象完全不同
这两个属性常被误配，根本原因是它们管的不是同一层东西：justify-items 控制每个网格项（grid item）在**各自单元格内**的水平对齐，而 align-content 控制**整个网格轨道（grid tracks）在容器交叉轴上**的分布。如果容器只有一行或一列，align-content 直接失效——它需要多轨道 + 容器有剩余空间才起作用。
-
justify-items: center会让所有子项在各自列中水平居中，哪怕列宽不一致、内容长度不同 -
align-content: center只有在grid-template-rows定义了 ≥2 行，且容器高度 > 所有行高总和时，才会把整组行块垂直居中 - 二者同时设置不会冲突，但解决的是完全不同的问题：一个是“单元格内对齐”，一个是“轨道整体定位”
什么时候该用 justify-items 而不是 justify-content
当你想让每个网格项在自己那格里水平居中（比如图标文字组合、卡片标题），而不是让整个网格块在父容器里水平居中，就该用 justify-items。用错成 justify-content 是高频失误——后者只影响轨道整体左右位置，对单个项内部对齐毫无作用。
- 适用场景：
.card { display: grid; grid-template-columns: auto 1fr; }中，希望左侧图标靠左、右侧文字在 1fr 列里居中 → 用justify-items: center即可统一控制所有 1fr 列内的内容 - 错误写法：
justify-content: center会把整个两列组成的网格块水平居中，但各列内部文字依然默认左对齐 - 注意：
justify-items对设置了justify-self的个别项无效，后者优先级更高
align-content 失效的三个典型条件
align-content 看似简单，但实际开发中“写了没反应”是常态。它必须同时满足三个条件才能生效，缺一不可：
- 容器设了明确高度（比如
height: 400px），且该高度 >grid-template-rows所有行高之和 -
grid-template-rows至少定义了两个轨道（如100px 100px或repeat(2, 100px)），单行网格直接无视该属性 - 未使用
align-items: stretch之类拉伸子项填满容器高度 —— 如果子项本身撑高了容器，剩余空间就没了
place-items 是更安全的替代方案吗
很多人想用 place-items: center 一步到位，但它只是 justify-items 和 align-items 的缩写，和 align-content 完全无关。如果你要的是“网格整体在父容器中居中”，place-items 压根不参与这件事；真正该配的是 justify-content + align-content，或者直接上 place-content: center（等价于两者都设为 center）。
-
place-items: center→ 所有项在各自单元格内居中（含水平+垂直） -
place-content: center→ 整个网格轨道块在容器内居中（需多轨道+剩余空间） - 别混淆
place-items和place-content，浏览器不会报错，但效果天差地别
容易被忽略的一点：Grid 的对齐逻辑是分层的——先定轨道位置（justify-content/align-content），再定轨道内单元格对齐（justify-items/align-items），最后才是单个项覆盖（justify-self/align-self）。跳过中间层直接调最上或最下，大概率得不到想要的结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
