There is padding between elements but not on either side

Question

I'm creating a card with a title and below it are other cards in 2 columns. The problem is that I want padding between the elements, not around them, at least not on the sides, as that would make the title inconsistent with the box below. This is what I want:

I tried giving each green card a different padding, so the top left padding would be 0 1em 1em 0, the top right padding would be 0 0 1em 1em and so on. It would be cleaner if I could have a general solution that contained any given number of cards, columns, rows, rather than "hard-coded" padding like this. is it possible?

One solution is to pad the header, but this feels like an ugly solution.

Top and bottom padding can exist, I just can't put it on the left or right if that would be easier.

Related codes:

.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

I think the easiest way to solve this problem is to add this,

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

to your Flex container (in this case the div tag with the red card class). Please try this one below.

.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

Grids are the solution to this problem. grid-template-columns tells the browser to space the divs two rows apart (if you want three columns, just specify three widths - you can also use # if you want multiple columns to be the same width) ##repeat() ). Then use ngap to change the space between.

CSS TipsHas a good introduction to grids, Kevin Powell also has a good introduction to this

.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