justify-content: center对最后一行无效，因其作用对象是整行列轨道而非单行内容；固定列数下空轨道仍存在，轨道整体默认左对齐，故视觉上末行靠左；改用auto-fit+minmax动态生成列数并配合justify-content: center，才能使实际存在的列整体居中。
justify-content: center 为什么对最后一行无效
因为 justify-content 控制的是**整行列轨道在容器内的水平位置**，不是“某一行里的项目”。当你用 grid-template-columns: repeat(4, 1fr)，Grid 就固定生成 4 列轨道；最后一行只有 2 个子项时，它们仍被分配到第 1、2 列轨道里，而第 3、4 列轨道空着——justify-content: center 没法让“部分轨道”居中，它只对所有已生成的轨道整体生效。
常见误操作是加了 justify-content: center 却没变，本质是轨道数没变，只是内容少。此时轨道本身仍左对齐（justify-content: start 默认值），所以视觉上还是靠左。
auto-fit + justify-content: center 才能让最后一行“看起来居中”
关键不是强行填满列数，而是让 Grid **按实际内容动态生成列数**，再把这组列整体居中。用 repeat(auto-fit, minmax(250px, 1fr))) 配合 justify-content: center：
-
auto-fit会收缩掉没有内容的列轨道，比如只剩 2 个项目，就只生成 2 列 -
justify-content: center此时作用于这 2 列，把它们一起居中对齐容器 - 必须写
justify-content: center，否则 auto-fit 生成的列默认还是左对齐 - 避免用
auto-fill—— 它保留空列，反而让最后一行继续左对齐
place-items: center 和 justify-content: center 完全不是一回事
place-items: center 是 justify-items: center 和 align-items: center 的简写，它只影响**每个网格项在其单元格内的对齐方式**，比如让卡片里的文字居中，或让图标在格子里垂直居中。它不改变格子的位置，也不影响整行分布。
如果你看到最后一行没居中，却去调 place-items，那是在调“格子内部”，而不是“格子在哪”。真正该动的是列轨道的布局逻辑，不是单元格里的内容。
伪元素补位或 transform 哈克容易失控
有人用 ::before/::after 插入空元素凑满列数，再配合 justify-content: center，但问题很多：
- 伪元素默认不是 grid item，需显式设
display: contents（IE 和旧 Safari 不支持） - 补的空元素参与
grid-auto-flow，可能打乱原有顺序，尤其开启dense时 -
transform: translateX()虽能手动推最后几个 item，但依赖固定数量，响应式下极易失效
这些方案看似“修”了最后一行，实则绕开了 Grid 的轨道模型，维护成本高，且在容器宽度变化时行为不可预测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
