元素之间有填充，但两侧没有填充

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