如何居中第二行的Grid末尾项并维持其原有宽度？

要实现第二行的item4居中且保持原有的跨列宽度，有两种实用方法：

方法一：占据整行后手动设置宽度并居中 #

这种方法无需修改原有Grid的列布局，仅调整item4的样式：

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item4 {
    grid-column: 1 / -1; /* 让item4占据第二行的全部网格列 */
    width: calc( (100% - 20px) / 3 * 2 + 10px ); /* 计算原跨2列的宽度：总可用宽度减去2个gap，单列宽乘2加中间gap */
    margin: 0 auto; /* 水平居中 */
}

解释： #

• grid-column: 1/-1 使item4铺满第二行的整个宽度，为居中提供空间。
• width 的计算式精准还原了原grid-column:2/span3对应的宽度（2个1fr列 + 1个grid-gap）。
• margin:0 auto 实现item4在整行内的水平居中。

方法二：调整Grid列布局实现自然居中 #

通过给Grid添加左右空白列，让item4自然居中，无需计算宽度：

.grid-container {
  display: grid;
  grid-template-columns: 0.5fr 1fr 1fr 0.5fr; /* 左右各添加0.5fr的空白列，中间保留原3列中的2列布局 */
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item1 { grid-column: 2; }
.item2 { grid-column: 3; }
.item3 { grid-column: 4; }
.item4 { grid-column: 2 / span 2; } /* 占据中间两个1fr列，宽度与原样式一致 */

解释： #

• 新增的左右0.5fr列会自动均分剩余空间，让中间的内容区域自然居中。
• item4的grid-column:2/span2保持了原有的跨2列宽度，同时处于Grid的中间位置，实现居中效果。
• 这种方法更灵活，容器宽度变化时能自动适配，无需手动计算宽度。

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