justify-items: center 未使子元素水平居中，因其仅控制网格项在各自单元格内的对齐；若列宽为1fr撑满容器，则居中不可见。应据场景选 justify-content: center（整体居中）或配合窄列宽使用 justify-items: center（单格居中）。
justify-items: center 为什么没让子元素水平居中？
因为 justify-items 控制的是**网格项（grid item）在各自单元格内的对齐方式**，不是整个网格容器内所有内容的水平居中。如果你只设了 justify-items: center，但每个子元素仍占满整行（比如默认 grid-template-columns: 1fr），那它只是“在那个超宽单元格里居中”，视觉上根本看不出来。
真正让所有网格内容水平居中该用什么？
分两种常见场景：
- 所有子元素想一起当做一个整体，在容器里水平居中 → 用
justify-content: center - 每个子元素想在自己列宽范围内水平居中 → 确保列宽不撑满，再配合
justify-items: center
例如：
.grid {
display: grid;
grid-template-columns: max-content max-content; /* 列宽由内容决定 */
justify-items: center; /* 每个子项在自己的窄列里居中 */
}
justify-items 和 justify-content 混用时的典型冲突
两者作用域不同，但容易互相掩盖效果：
-
justify-content: center把整行网格轨道往中间挤，可能让列间隙变大 -
justify-items: center在已分配好的单元格里生效，如果列被justify-content拉宽了，它就又“藏”进大格子里看不见 - Chrome DevTools 里检查元素，常看到子项的 computed width 是 100%，说明它仍占满列 —— 那
justify-items就没实际表现空间
替代方案：用 place-items 简化写法但要注意覆盖范围
place-items: center 是 justify-items 和 align-items 的简写，但它**不会影响 justify-content**。所以：
- 它适合“每个格子都希望内容居中”的布局（如图标网格、卡片列表）
- 如果网格本身列数少、容器宽，依然需要
justify-content: center来居中整行轨道 - 不要以为写了
place-items: center就万事大吉 —— 它管不了网格线怎么排布
容易被忽略的是：网格的“轨道对齐”和“单元格内对齐”是两层事，得同时看清容器的 grid-template-*、justify-content、以及子项的 justify-self 才能定位问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
