Je crée une carte avec un titre et en dessous se trouvent d'autres cartes sur 2 colonnes. Le problème est que je veux un remplissage entre les éléments, pas autour d'eux, du moins pas sur les côtés, car cela rendrait le titre incohérent avec la case ci-dessous. C'est ce que je veux :

J'ai essayé de donner à chaque carte verte un remplissage différent, donc le remplissage en haut à gauche serait 0 1em 1em 0, le remplissage en haut à droite serait 0 0 1em 1em et ainsi de suite. Ce serait plus propre si je pouvais avoir une solution générale contenant un nombre donné de cartes, de colonnes, de lignes, plutôt qu'un remplissage "codé en dur" comme celui-ci. Est-il possible?

Une solution consiste à remplir l'en-tête, mais cela semble être une solution moche.

Le rembourrage supérieur et inférieur peut exister, je ne peux tout simplement pas le mettre à gauche ou à droite si cela était plus facile.

Code associé :

.content-card {
  width: 100%;
  padding: 2em 2em 2em;
  background: black;
}

.service-card {
  max-width: 100%;
  padding: 1em 1em 1em;
  background: grey;
  border-radius: 0.25em;
}

.row {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.column-2x2 {
  display: flex;
  flex-direction: column;
  flex-basis: 45%;
  padding: 1em 1em 1em;
}

<div class="content-card">
  <h2 style="color:white; font-size: 36px">Services.</h2>
  <br>
  <div class='row'>
    <div class='column-2x2'>
      <div class="service-card">
        <h3 class="">Service 1.</h3>
      </div>
    </div>
    <div class='column-2x2'>
      <div class="service-card">
        <h3 class="">Service 2.</h3>
      </div>
    </div>
    <div class='column-2x2'>
      <div class="service-card">
        <h3 class="">Service 3.</h3>
      </div>
    </div>
    <div class='column-2x2'>
      <div class="service-card">
        <h3 class="">Service 4.</h3>
      </div>
    </div>
  </div>
</div>