如何在两列Grid布局中水平居中最后一行的单个网格项？

问题分析 #

你设置的justify-self: center未生效，原因是Grid容器的列是固定的两列（repeat(2, 1fr)），最后一个项默认占据第一列的网格单元格，justify-self: center仅能让项在这个单元格内部居中，而非整个容器的水平中心，所以视觉上仍然靠左。

解决方案 #

方法一：固定容器宽度下精准控制最后一项

让最后一个项跨占所有列，再在跨列的单元格内居中，并手动计算出与其他项一致的宽度：

.container {
  width: 700px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 40px;
  row-gap: 20px;
}

.item {
  background-color: #38bdf8;
  border-radius: 16px;
  height: 50px;
}

.item:last-child {
  grid-column: 1 / -1; /* 跨所有列 */
  justify-self: center; /* 在单元格内水平居中 */
  width: calc((700px - 40px) / 2); /* 计算匹配其他项的宽度 */
}

方法二：自适应列配置（推荐）

改用auto-fit配合minmax实现自适应布局，无需硬编码宽度，同时自动让最后一个项居中：

.container {
  max-width: 700px; /* 限制容器最大宽度 */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc((700px - 40px)/2), 1fr));
  gap: 20px 40px;
  justify-content: center;
}

.item {
  background-color: #38bdf8;
  border-radius: 16px;
  height: 50px;
}

效果说明 #

修改后，最后一个项会在容器水平方向居中，且宽度与其他项完全一致，符合需求。

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