CSS Столбцы сетки слишком близко друг к другу

Question

У меня есть сетка ниже с css. Во второй строке Дата документа слишком близка к номеру документа. Я пробовал сменить 1fr на 3fr, не получилось.

.titles-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

<div class="titles-grid">
  <div class="first-column">Document Number</div>
  <div class="second-column">Created</div>
  <div class="first-column">{{documentApnIncorporatorData.documentNumber}}</div>
  <div class="second-column">{{documentApnIncorporatorData.documentDate}}</div>
</div>

Я собирался добавить следующее с margin-left. Просто любопытно, есть ли более профессиональная сетка css для разделения интервала столбцов.

.second-column {
   margin-left:5px;
}

введите описание изображения здесь

Answer 1

Вы можете использовать:

• grid-gap
• grid-row-gap
• grid-column-gap

для добавления интервала к сетке

Например,

.titles-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 3em;
}

<div class="titles-grid">
  <div class="first-column">Document Number</div>
  <div class="second-column">Created</div>
  <div class="first-column">{{documentApnIncorporatorData.documentNumber}}</div>
  <div class="second-column">{{documentApnIncorporatorData.documentDate}}</div>
</div>

Обратите внимание, что grid-row-gap и grid-column-gap постепенно прекращаются для row-gap и column-gap соответственно.

Answer 2

Просто добавьте column-gap: 2rem; в rem или px, как хотите.

.titles-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2rem; /* added */
}

<div class="titles-grid">
  <div class="first-column">Document Number</div>
  <div class="second-column">Created</div>
  <div class="first-column">{{documentApnIncorporatorData.documentNumber}}</div>
  <div class="second-column">{{documentApnIncorporatorData.documentDate}}</div>
</div>