CSS Flexbox Gap - gap value affecting width calculation

Question

I am using flexbox and the new gap function to add some space between items. I am trying to have 4 items per row so have set item width to be 25% like this...

.container {
  display: flex;
  max-width: 800px;
  width: 100%;
  background: gold;
  flex-wrap: wrap;
  gap: 20px;
}

.item {
  width: 25%;
  background: teal;
}

<div class="container">

  <div class="item">
    Item 1
  </div>
  
  <div class="item">
    Item 2
  </div>
  
  <div class="item">
    Item 3
  </div>
  
  <div class="item">
    Item 4
  </div>
  
  <div class="item">
    Item 5
  </div>
  
  <div class="item">
    Item 6
  </div>
  
</div>

But this is giving me 3 items per row instead, I assume it is because it is taking the gap value into account when calculating widths.

How can I work around this?

the duplicate deal with margin but the issue is the same as with gap — Temani Afif, Jun 16 '21 at 19:39

score 12 · Accepted Answer · answered Jun 16 '21 at 17:59

You could define the gap in a CSS custom property and then calculate the width of the items with a little bit of math.

.container {
  --gap: 20px;
  --columns: 4;
  display: flex;
  max-width: 800px;
  width: 100%;
  background: gold;
  flex-wrap: wrap;
  gap: var(--gap);
}

.item {
  width: calc((100% / var(--columns)) - var(--gap) + (var(--gap) / var(--columns)));
  background: teal;
}

<div class="container">

  <div class="item">
    Item 1
  </div>
  
  <div class="item">
    Item 2
  </div>
  
  <div class="item">
    Item 3
  </div>
  
  <div class="item">
    Item 4
  </div>
  
  <div class="item">
    Item 5
  </div>
  
  <div class="item">
    Item 6
  </div>
  
</div>

I haven't heard of custom css properties yet, will do some reading. Thanks for the pointer — fightstarr20, Jun 16 '21 at 19:46

score 7 · Answer 2 · answered Jun 16 '21 at 17:58

7

You can subtract the gap from the width. 20px gap * 3 / 4 (columns)

.item {
   width: calc(25% - 15px);
   background: teal;
}

answered Jun 16 '21 at 17:58

Moshe Sommers

1,466
7
11

I like this, not how I would have though to approach it at all but works really well – fightstarr20 Jun 16 '21 at 19:46

Gass · Answer 3 · 2021-06-16T18:29:43.530

Consider this other approach, it's easier. Just enter the gap value and that's it.

.container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  max-width:800px;
  background-color:gold;
  gap:20px;
}

/* -- Select all <div> elements within the container -- */
.container > div {
  background-color: teal;
}

<div class="container">

  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>

</div>

CSS Flexbox Gap - gap value affecting width calculation

3 Answers3

Linked