Es gibt eine Polsterung zwischen den Elementen, jedoch nicht auf beiden Seiten

Question

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>

Answer 1

我认为解决这个问题最简单的方法就是添加这个，

justify-content: space-between;
align-content: space-between;

到你的Flex容器（在本例中是带有红卡类的div标签）。请尝试下面这个。

.red-card{
    height: 350px;
    width: 250px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
    border: 3px solid red
}
.green-card{
    height: 150px;
    width: 100px;
    border: 3px solid green
}

TITLE IS HERE

    

      

      

      

  

Answer 2

网格是解决这个问题的方法。 grid-template-columns 告诉浏览器将 div 间隔两行（如果您想要三列，只需指定三个宽度 - 如果您想让多列具有相同的宽度，您也可以使用 repeat() ）。然后使用 ngap 更改之间的空格。

CSS技巧对网格有很好的入门知识，< a href="https://www.youtube.com/watch?v=rg7Fvvl3taU" rel="nofollow noreferrer">Kevin Powell 对此也有很好的介绍

.title-container {
  padding: 0.5rem 1.5rem;
  border: 2px solid black;
  color: red;
  width: fit-content;
}

.container {
  display: grid;
  width: fit-content;
  grid-template-columns: 5rem 5rem;
  gap: 0.5rem;
  outline: 2px solid red;
  margin-block: 0.5rem;
}

.container>div {
  height: 7rem;
  border: 2px solid #22B14C;
}

  TITLE IS HERE