Padding between elements but not on the sides

Question

I am creating a card which has a title and then below that it has other cards in columns of 2. The problem is that I want padding between the elements but not around them, at least not on the sides, since that makes the title misalign with the boxes below. Here is what I want:

I have tried to give each green card a different padding, so the top left have a padding of 0 1em 1em 0, the top right have 0 0 1em 1em and so on. It would be cleaner though if I could have a generic solution with any given number of cards, columns, rows and not "hard code" the padding like that. Is this possible?

One solution is to pad the title but that feels like an ugly solution.

Top and bottom padding can be present if that makes it easier, I just can't have it on the left or right.

The relevant 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>

Maybe you could try using negative margin-top for the columns to achieve this result? — pwkc, Nov 02 '22 at 14:31

Adam · Accepted Answer · 2022-11-02T14:43:41.223

Grid is the way to go here. grid-template-columns tells the browser to have the divs spaced two apart (if you wanted three columns, just have three widths specified - if you want to have several columns the same width you can also use repeat() ). Then use gap to alter the space between.

CSS tricks has a good primer on grid and Kevin Powell also has a good intro to it

.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;
}

<div class='title-container'>
  TITLE IS HERE
  <div class='container'>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

score 2 · Answer 2 · answered Nov 02 '22 at 15:17

I think the easiest way to solve it is adding this,

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

to your flex container (in this case div tag with 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
}

<div>TITLE IS HERE</div>
<div class="red-card">
    <div class="green-card"></div>
      <div class="green-card"></div>
      <div class="green-card"></div>
      <div class="green-card"></div>
  </div>

I have already implemented the grid solution, but thank you for the answer. I will try this on some other place in the code! :) — eligolf, Nov 02 '22 at 15:34

score 0 · Answer 3 · answered Nov 02 '22 at 14:31

Use gap for spacing. Note that I've decreased the height and width the half of gap value.

section {
  display: flex;
  flex-wrap: wrap;
  width: 250px;
  height: 500px;
  border: 1px solid red;
  gap: 30px;
}

section article {
  width: calc(50% - 15px);
  height: calc(50% - 15px);
  background-color: green; 
}

<section>
  <article></article>
  <article></article>
  <article></article>
  <article></article>
</section>

Padding between elements but not on the sides

3 Answers3