Il y a un rembourrage entre les éléments mais pas d'un côté ou de l'autre

Question

Je crée une carte avec un titre et en dessous se trouvent d'autres cartes sur 2 colonnes. Le problème est que je veux un remplissage entre les éléments, pas autour d'eux, du moins pas sur les côtés, car cela rendrait le titre incohérent avec la case ci-dessous. C'est ce que je veux :

J'ai essayé de donner à chaque carte verte un remplissage différent, donc le remplissage en haut à gauche serait 0 1em 1em 0, le remplissage en haut à droite serait 0 0 1em 1em et ainsi de suite. Ce serait plus propre si je pouvais avoir une solution générale contenant un nombre donné de cartes, de colonnes, de lignes, plutôt qu'un remplissage "codé en dur" comme celui-ci. Est-il possible?

Une solution consiste à remplir l'en-tête, mais cela semble être une solution moche.

Le rembourrage supérieur et inférieur peut exister, je ne peux tout simplement pas le mettre à gauche ou à droite si cela était plus facile.

Code associé :

.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

Je pense que le moyen le plus simple de résoudre ce problème est d'ajouter ceci,

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

Vers votre conteneur Flex (dans ce cas une balise div avec la classe carton rouge). Veuillez essayer celui-ci ci-dessous.

.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

Les grilles sont la solution à ce problème. grid-template-columns 告诉浏览器将 div 间隔两行（如果您想要三列，只需指定三个宽度 - 如果您想让多列具有相同的宽度，您也可以使用 repeat() ）。然后使用 ngap Changez l'espace entre.

CSS Tipsa une bonne introduction aux grilles, < a href="https://www.youtube.com/watch?v=rg7Fvvl3taU" rel="nofollow noreferrer">Kevin Powell a également une bonne introduction à cela

.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