justify-content在Grid中不生效，根本原因是容器主轴无剩余空间；它作用于列轨道整体而非单个子项，需主动留空或改用place-items等替代方案。
justify-content 在 Grid 中不生效，绝大多数情况不是属性写错了，而是容器压根没“剩空间”可分配——它只在主轴方向有剩余空间时才起作用。
容器宽度不够，根本没空可分
Grid 的 justify-content 不是“移动元素”，而是把主轴（默认水平）上容器宽度减去所有列轨道总宽的差值，按策略分给间隙。如果差值为 0，所有值都退化为 flex-start（即左对齐）。
- 常见表现：
grid-template-columns: 1fr 1fr 1fr配width: 100%，三列刚好填满容器，justify-content: space-between完全没反应 - 响应式陷阱：小屏下
grid-template-columns: 1fr→ 列宽 = 容器宽 → 差值为 0 →justify-content被跳过 - 验证方法：临时加
outline: 1px solid red到 Grid 容器，看是否有可视空白区域 - 补救方式：用
gap替代间隙控制；或改用repeat(auto-fit, minmax(200px, 1fr))让列数自适应，留出自然余量
容器是 inline-grid，行为像内联元素
display: inline-grid 的容器宽度由内容决定，不会自动撑满父容器，导致主轴无剩余空间。它不像 display: grid 那样默认块级占满行宽。
- 现象：写了
justify-content: center，但整个网格靠左贴边 - 检查点：开发者工具中看 computed
display是否为inline-grid，再看 computedwidth是否远小于父容器 - 修复建议：优先用
display: grid；若必须 inline-grid，需显式加width: 100%或width: fit-content并配合margin: 0 auto
误把 justify-content 当成子项对齐，该用 place-items
justify-content 控制的是“所有列组成的整体”在父容器中的位置，不是单个子项怎么摆。想让一个子项居中，或者让所有子项在各自单元格里居中，它完全不负责。
立即学习“前端免费学习笔记（深入）”；
- 典型误用：只有一个子项，却只设
justify-content: center→ 实际需要的是place-items: center -
place-items: center等价于justify-items: center; align-items: center，对单个子项立即生效 - 若要整体水平居中 + 垂直居中，且容器有固定高（如
height: 400px），place-items比分别写两个属性更直接、更少歧义
真正卡住人的地方，往往不是不知道语法，而是没意识到 justify-content 的作用对象是“轨道集合”，不是“内容”。它不关心子项长什么样，只看容器主轴有没有空——这个空，得你主动留出来。
