CSS3 Grid - Равный интервал между текстом в столбцах, сохраняя первый и последний выравнивается по противоположным краям

Question

Проблема, с которой я сталкиваюсь, лучше всего описать с помощью картинки и объяснения.Я использую CSS3 Grid, и у меня есть 4 столбца в одной строке, все из которых содержат строку из 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

Вы можете создать пустые столбцы для использования в качестве разделителей:

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

Answer 2

Вы можете выровнять их по горизонтали (встроенная ось) с помощью 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>