如何居中Grid容器最后一行剩余元素？是否需单独设置列？

我创建了一个包含3列的Grid容器，但仅有5个内容元素。当前布局如下：

|   1   |   2   |   3   |
|   4   |   5   |

我希望将底部剩余的两个元素居中显示，效果如下：

|   1   |   2   |   3   |
    |   4   |   5   |

请问该效果是否可实现？还是需要单独为其设置列？

当前代码 #

CSS #

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 5px;
  
}

span {
  border: 1px solid black;
}

HTML #

<div class="container">
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
</div>

解决方案 #

可以实现，不需要单独设置列，最简单的方法是给Grid容器添加justify-content: center属性：

修改后的CSS代码 #

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 5px;
  justify-content: center; /* 添加这一行 */
}

span {
  border: 1px solid black;
}

原理说明 #

grid-template-columns: repeat(3, 1fr)会让容器分成3个等宽列，第一行的3个元素会填满整个容器宽度；第二行只有2个元素，总宽度为2fr，小于容器的3fr宽度，justify-content: center会让这一行的网格轨道整体在容器内居中，正好符合你想要的布局效果。

如果需要针对特定元素做更精细的控制，也可以给最后两个元素设置grid-column属性，比如：

span:nth-child(4) {
  grid-column: 2 / 3;
}
span:nth-child(5) {
  grid-column: 3 / 4;
}

不过这种方法需要指定元素位置，不如justify-content通用，适合固定数量元素的场景。

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