CSS Grid如何实现6列网格布局下各行项目居中对齐？

不需要额外添加空占位DOM、不需要写JS判断数据条数，纯CSS即可实现需求，以下两种方案都可直接使用，按需选择即可：

方案1：保留Grid布局（原代码改动最小） #

原有代码的问题是写死了6个固定网格轨道，哪怕最后一行元素不足6个，空轨道依然存在，会把元素挤到左侧。只需调整3处配置即可：

• 将固定列数的repeat(6, max-content)改为自动填充列的repeat(auto-fit, 5rem)，列宽与item固定宽度保持一致
• 给容器添加max-width限制，值为「6个item宽度 + 5个间距宽度」，从物理尺寸上限制单行最多只能放下6个item
• 保留justify-content: center配置，不足一行的元素会自动在剩余空间内居中排列

完整CSS代码：

* {
  margin: 0;
}

.container {
  display: grid;
  /* 自动填充列，单列宽度与item宽度一致 */
  grid-template-columns: repeat(auto-fit, 5rem);
  justify-content: center;
  gap: 3rem;
  /* 限制容器最大宽度，保证单行最多展示6项 */
  max-width: calc(6 * 5rem + 5 * 3rem);
  margin: 3rem auto;
}

.item {
  height: 5rem;
  width: 5rem;
}

方案2：Flex布局（逻辑更直观） #

如果对Grid规则不熟悉，用弹性布局实现逻辑更简单，核心逻辑和Grid方案一致：限制容器最大宽度保证单行最多6项，开启换行后设置内容居中即可，注意给item加flex-shrink: 0防止宽度被压缩：

* {
  margin: 0;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3rem;
  /* 最大宽度计算逻辑与Grid方案一致 */
  max-width: calc(6 * 5rem + 5 * 3rem);
  margin: 3rem auto;
}

.item {
  height: 5rem;
  width: 5rem;
  /* 禁止item被弹性压缩变形 */
  flex-shrink: 0;
}

两种方案都完全符合需求规则：

• 共3个数据项时：容器宽度小于最大宽度，3个项目直接在单行内居中排列
• 共8个数据项时：第一行刚好排满6个项目占满容器宽度，第二行2个项目自动居中
• 共11个数据项时：第一行排满6个、第二行排5个，第二行的5个项目自动居中
  对接CMS时无需后端做特殊处理，任意数量的数据项都能自动适配布局规则。

内容的提问来源于stack exchange，提问作者user11720384