元素之間有填充，但兩側沒有填充

Question

我正在創建一張帶有標題的卡片，下面有 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>

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技巧對網格有很好的入門知識，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