CSS3网格-列中文本之间的间距相等，同时使第一个和最后一个对齐到相对的边缘

Question

我遇到的问题最好用图片和解释加以总结。 我正在使用CSS3 Grid，并且在同一行中有4列，所有列均包含一个4位数字的字符串，如下所示。

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

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

相关HTML（角度）

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

相关CSS

.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;
}

Answer 1

您可以使用justify-self将它们水平对齐（内联轴）。
Codepen

.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;
    padding:27px 27px 17px 27px;
    border-radius: 6px;
    background: lightsalmon;
    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;
  justify-self: center; /* 2 and 3 */
    padding-bottom: 20px;
    font-family: $family-open-sans;
    font-size: 18px;
    font-weight: 600;
    color: #4a4a4a;
}

.card-number-section:first-child {
  justify-self: start; /* 1 */
  background-color: lightgreen;
}

.card-number-section:last-child {
  justify-self: end; /* 4 */
  background-color: lightblue;
}

<div class="credit-card">
  <div class="card-number-section">Left</div>
  <div class="card-number-section">Center</div>
  <div class="card-number-section">Center</div>
  <div class="card-number-section">Right</div>
</div>

Answer 2

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

.credit-card {
  position: relative;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr 1fr 1fr;
  grid-template-columns: auto 1fr auto 1fr auto 1fr auto;
  grid-template-areas: "a . b . c . d";
  -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-sizing: border-box;
  overflow: hidden;
  background-color: lightgreen;
  background-clip: content-box;
}

.card-number-section {
  -ms-grid-row: 3;
  grid-row: 3;
  grid-area: a;
  padding-bottom: 20px;
  font-family: $family-open-sans;
  font-size: 18px;
  font-weight: 600;
  background-color: wheat;
}

.card-number-section:nth-child(2) {
  grid-area: b;
}

.card-number-section:nth-child(3) {
  grid-area: c;
}

.card-number-section:nth-child(4) {
  grid-area: d;
}

<div class="credit-card">
  <div class="card-number-section">1111</div>
  <div class="card-number-section">2222</div>
  <div class="card-number-section">3333</div>
  <div class="card-number-section">4444</div>
</div>

使用列的替代代码段

.credit-card {
  position: relative;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr 1fr 1fr;
  grid-template-columns: auto 1fr auto 1fr auto 1fr auto;
  -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-sizing: border-box;
  overflow: hidden;
  background-color: lightgreen;
  background-clip: content-box;
}

.card-number-section {
  -ms-grid-row: 3;
  grid-row: 3;
  grid-column: 1;
  padding-bottom: 20px;
  font-family: $family-open-sans;
  font-size: 18px;
  font-weight: 600;
  background-color: wheat;
}

.card-number-section:nth-child(2) {
  grid-column: 3;
}

.card-number-section:nth-child(3) {
  grid-column: 5;
}

.card-number-section:nth-child(4) {
  grid-column: 7;
}

<div class="credit-card">
  <div class="card-number-section">1111</div>
  <div class="card-number-section">2222</div>
  <div class="card-number-section">3333</div>
  <div class="card-number-section">4444</div>
</div>