我正在创建一张带有标题的卡片，下面有 2 列中的其他卡片。问题是我想要元素之间的填充，而不是它们周围的填充，至少不在两侧，因为这使得标题与下面的框不一致。这是我想要的：

我尝试为每张绿卡提供不同的填充，因此左上角的填充为 0 1em 1em 0，右上角的填充为 0 0 1em 1em 等等。如果我可以有一个通用的解决方案，包含任何给定数量的卡片、列、行，而不是像这样的“硬编码”填充，那么它会更干净。这可能吗？

一种解决方案是填充标题，但这感觉像是一个丑陋的解决方案。

顶部和底部填充可以存在，如果这样更容易的话，我只是不能把它放在左边或右边。

相关代码：

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