Ich erstelle eine Karte mit einem Titel und darunter befinden sich weitere Karten in zwei Spalten. Das Problem ist, dass ich einen Abstand zwischen den Elementen möchte, nicht um sie herum, zumindest nicht an den Seiten, da dies dazu führen würde, dass der Titel nicht mit dem Feld unten übereinstimmt. Das ist es, was ich will:

Ich habe versucht, jeder grünen Karte eine andere Polsterung zu geben, also wäre die obere linke Polsterung 0 1em 1em 0, die obere rechte Polsterung wäre 0 0 1em 1em und so weiter. Es wäre sauberer, wenn ich eine allgemeine Lösung hätte, die eine beliebige Anzahl von Karten, Spalten und Zeilen enthalten könnte, anstatt eine „hartcodierte“ Auffüllung wie diese. Ist es möglich?

Eine Lösung besteht darin, die Kopfzeile aufzufüllen, aber das scheint eine hässliche Lösung zu sein.

Polsterung oben und unten kann vorhanden sein, ich kann sie nur nicht links oder rechts anbringen, wenn das einfacher wäre.

Zugehöriger Code:

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