CSS3网格-列中文本之间的间距相等，同时保持第一个&；最后对齐到相对边

我遇到的问题最好用图片和解释来概括。 我使用的是CSS3网格，同一行中有4列，都包含一个由4位数字组成的字符串，如下所示

问题是，我无法找到一种方法来确保行的第一列和最后一列的文本与边缘对齐，同时保持所有4列内容之间的间距相等：

我尝试将文本居中，但这会导致卡号与网格边缘不对齐

相关HTML（角度）

<ng-container *ngFor="let section of _CardNumberSections">
  <div class="card-number-section">
    {{ section }}
  </div>
</ng-container>

---

您可以将它们水平对齐（内联轴）。

。信用卡{
位置：相对位置；
显示：-ms网格；
显示：网格；
-ms网格柱：1fr 1fr 1fr 1fr；
网格模板柱：1fr 1fr 1fr 1fr；
-ms网格行：自动1fr 1fr；
网格模板行：自动1fr；
网格行间距：5px；
宽度：326px；
填充：27px 27px 17px 27px；
边界半径：6px；
背景：轻鲑鱼；
边框：1px实心#EFEF；
盒影：0px24px0pxRGBA（0,0,0,0.07）；
框大小：边框框；
溢出：隐藏；
}
.卡号组{
-ms网格行：3；
网格行：3；
自我证明：居中；/*2和3*/
垫底：20px；
字体系列：$family open sans；
字号：18px；
字号：600；
颜色：#4a4a4a；
}
.卡号部分：第一个孩子{
自我证明：开始；/*1*/
背景颜色：浅绿色；
}
.卡号部分：最后一个孩子{
自我证明：结束；/*4*/
背景颜色：浅蓝色；
}

左边
居中
居中
赖特

您可以将它们水平对齐（内联轴）。

。信用卡{
位置：相对位置；
显示：-ms网格；
显示：网格；
-ms网格柱：1fr 1fr 1fr 1fr；
网格模板柱：1fr 1fr 1fr 1fr；
-ms网格行：自动1fr 1fr；
网格模板行：自动1fr；
网格行间距：5px；
宽度：326px；
填充：27px 27px 17px 27px；
边界半径：6px；
背景：轻鲑鱼；
边框：1px实心#EFEF；
盒影：0px24px0pxRGBA（0,0,0,0.07）；
框大小：边框框；
溢出：隐藏；
}
.卡号组{
-ms网格行：3；
网格行：3；
自我证明：居中；/*2和3*/
垫底：20px；
字体系列：$family open sans；
字号：18px；
字号：600；
颜色：#4a4a4a；
}
.卡号部分：第一个孩子{
自我证明：开始；/*1*/
背景颜色：浅绿色；
}
.卡号部分：最后一个孩子{
自我证明：结束；/*4*/
背景颜色：浅蓝色；
}

左边
居中
居中
赖特

您可以创建空列用作分隔符：

。信用卡{
位置：相对位置；
显示：-ms网格；
显示：网格；
-ms网格柱：1fr 1fr 1fr 1fr；
网格模板列：auto 1fr auto 1fr auto 1fr auto；
网格模板区域：“a.b.c.d”；
-ms网格行：自动1fr 1fr；
网格模板行：自动1fr；
网格行间距：5px；
宽度：326px；
//高度：204px；
填充：27px 27px 17px 27px；
边界半径：6px；
背景：#fff；
边框：1px实心#EFEF；
框大小：边框框；
溢出：隐藏；
背景颜色：浅绿色；
背景剪辑：内容框；
}
.卡号组{
-ms网格行：3；
网格行：3；
网格面积：a；
垫底：20px；
字体系列：$family open sans；
字号：18px；
字号：600；
背景色：小麦；
}
.卡号部分：第n个子（2）{
网格面积：b；
}
.卡号部分：第n个子（3）{
网格面积：c；
}
.卡号部分：第n个子（4）{
网格面积：d；
}

1111
2222
3333
4444

您可以创建空列用作分隔符：

。信用卡{
位置：相对位置；
显示：-ms网格；
显示：网格；
-ms网格柱：1fr 1fr 1fr 1fr；
网格模板列：auto 1fr auto 1fr auto 1fr auto；
网格模板区域：“a.b.c.d”；
-ms网格行：自动1fr 1fr；
网格模板行：自动1fr；
网格行间距：5px；
宽度：326px；
//高度：204px；
填充：27px 27px 17px 27px；
边界半径：6px；
背景：#fff；
边框：1px实心#EFEF；
框大小：边框框；
溢出：隐藏；
背景颜色：浅绿色；
背景剪辑：内容框；
}
.卡号组{
-ms网格行：3；
网格行：3；
网格面积：a；
垫底：20px；
字体系列：$family open sans；
字号：18px；
字号：600；
背景色：小麦；
}
.卡号部分：第n个子（2）{
网格面积：b；
}
.卡号部分：第n个子（3）{
网格面积：c；
}
.卡号部分：第n个子（4）{
网格面积：d；
}

1111
2222
3333
4444

我不知道为什么我没有想到这一点，这是一个非常简单的解决方案，也使我更容易在两者之间画破折号。然而，正如我所记得的，旧版本的IE不支持网格区域。所以我想我必须改变我的实际html结构以支持这些？我使用了区域，因为更容易看到使用它们的结构。您可以使用列（添加的代码片段）获得相同的结果。我不知道为什么我没有想到这一点，这是一个非常简单的解决方案，而且使我更容易在两者之间画破折号。然而，正如我所记得的，旧版本的IE不支持网格区域。所以我想我必须改变我的实际html结构以支持这些？我使用了区域，因为更容易看到使用它们的结构。您可以使用列（添加的代码段）获得相同的结果

.credit-card{
    position: relative;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr 1fr 1fr; 
    grid-template-columns: 1fr 1fr 1fr 1fr;
    -ms-grid-rows: auto 1fr 1fr;
    grid-template-rows: auto auto auto 1fr;
    grid-row-gap: 5px;
    width: 326px;
    //height:204px;
    padding:27px 27px 17px 27px;
    border-radius: 6px;
    background: #fff;
    border: 1px solid #efefef;
    box-shadow: 0px 2px 24px 0px rgba(0,0,0, 0.07);
    box-sizing: border-box;
    overflow: hidden;

.card-number-section{
    -ms-grid-row: 3;
    grid-row:3;
    padding-bottom: 20px;
    font-family: $family-open-sans;
    font-size: 18px;
    font-weight: 600;
    color: #4a4a4a;
}