March 2026

Space Items Evenly with CSS Grid (instead of Flexbox)

TL;DR

Go read this for how to do a grid layout

How to create a responsive grid system with CSS Grid by Chris Ferdinandi.

I'll update this post with that approach later. For now, just know that you probably want to use grid instead of flexbox and do something like this to get started.

Output

HTML

<div class="grid-wrapper">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

.grid-wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.8rem
}

.grid-wrapper div {
  background-color: goldenrod;
  border-radius: 0.3rem;
  min-height: 100px;
}

Semi-Flexible

Here's the flexbox approach.

Output

HTML

<div class="flex-wrapper">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

.flex-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.3rem;
}

.flex-wrapper div {
  background-color: goldenrod;
  border-radius: 0.3rem;
  min-height: 100px;
  width: 21%;
}

One Row Only

Note that this probably doesn't do what you want if items are going to wrap rows and there's not enough items for each row to have the same number of item. For example:

Output

HTML

<div class="flex-wrapper">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

The two items on the second row get pushed to the edges which tends to look weird. Hence the grid solution at the top of this post.

-a

end of line