CSS Grid如何实现列居中？现有代码运行后网格项全部左对齐该如何解决

问题原因 #

你当前的代码失效是因为grid-template-columns: repeat(5, 1fr)的配置：1fr是按比例分配容器剩余宽度的单位，5个1fr列最终会撑满整个Grid容器的可用宽度。而justify-content属性的作用是控制网格轨道整体在容器中的对齐，当轨道总宽度等于容器宽度时，这个属性自然不会生效。另外你写的align-items是控制网格项在自身单元格内的交叉轴对齐，和列整体居中的需求无关。

修正方案 #

你可以根据实际需求选择以下两种方案：

方案1：固定列宽，整组列在容器内水平居中 #

如果你希望5列总宽度固定，整组列在容器中居中，将列宽设置为固定值即可：

.example-grid {
  display: grid;
  justify-content: center;
  /* 可替换为你需要的单格宽度 */
  grid-template-columns: repeat(5, 120px);
  /* 可选：如果需要单元格内部的内容也居中，添加以下属性 */
  justify-items: center;
  align-items: center;
}

方案2：列宽占满容器，网格项在各自单元格内居中 #

如果你需要列依然按比例占满整个容器宽度，只是每个列中的内容居中，直接使用justify-items控制单元格内内容的对齐规则即可：

.example-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  /* 控制所有单元格内的内容水平居中 */
  justify-items: center;
  /* 如需内容垂直居中则保留这行 */
  align-items: center;
}

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