Html 网格布局内的中心柱

我已经开始学习网格系统（display:grid），我有以下代码，但我不知道如何在网格模板列中添加更多列，并在列中使用网格列开始和网格列结束的情况下，将最后两列（4和5）居中。可能吗

HTML:

<div class="grid-container">
  <div class="grid-item">
      1
    </div>
    <div class="grid-item">
        2
    </div>
    <div class="grid-item">
        3
    </div>
    <div class="grid-item">
        4
    </div>
    <div class="grid-item">
        5
    </div>
</div>

body {
    margin: 0;
}

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

.grid-item {
    padding: 10px;
    background: skyblue;
}

JSFiddle：

我所拥有的：

<div class="grid-container">
  <div class="grid-item">
      1
    </div>
    <div class="grid-item">
        2
    </div>
    <div class="grid-item">
        3
    </div>
    <div class="grid-item">
        4
    </div>
    <div class="grid-item">
        5
    </div>
</div>

body {
    margin: 0;
}

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

.grid-item {
    padding: 10px;
    background: skyblue;
}

我想要什么：

<div class="grid-container">
  <div class="grid-item">
      1
    </div>
    <div class="grid-item">
        2
    </div>
    <div class="grid-item">
        3
    </div>
    <div class="grid-item">
        4
    </div>
    <div class="grid-item">
        5
    </div>
</div>

body {
    margin: 0;
}

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

.grid-item {
    padding: 10px;
    background: skyblue;
}

---

如果使用CSS网格，则应添加列-使用网格模板列使用6列网格：重复（6，1fr），每个项目跨越两个网格列-并使用

网格列

规则将最后一行放在中间-参见下面的演示：

正文{
保证金：0；
}
.网格容器{
显示：网格；
网格模板列：重复（6，1fr）；
栅隙：20px；
}
.表格项目{
填充：10px；
背景：天蓝色；
格构柱：跨度2；
}
.网格项：第n个最后一个子项（2）{
网格柱：2/4；
}
.grid项：最后一个子项{
网格柱：4/6；
}

1.
2.
3.
4.
5.
我在编写这个完全相同的代码的过程中回答了这个问题。是否应该删除
网格列
行，或者这是为了什么？我唯一搞不清楚的问题是如何从每行的外部div中删除外部边距。当以这种方式使用边距创建间隙时，可能不可能。一种方法是给
边距：0-20px
以删除外部边距，然后在
网格容器的父容器上处理溢出。。。