search ]

Using CSS Gap with Flexbox

CSS Flexbox as well as CSS Grid are excellent tools for managing layout on websites. Flexbox provides wonderful one-dimensional alignment, and CSS Grid solves the issue of two-dimensional alignment using rows and columns.

Sometimes, we often want to add spacing between elements in our layout (and margins are no longer the answer). In this post, we’ll see how to add spacing between flex items using the CSS property called gap, which is the shorthand for the properties row-gap & column-gap.

Many of us are familiar with it from CSS grid, but not many of us use this feature for flex containers, and we should, especially since browser support for gap is quite extensive as you’ll see at the end of the post.

Despite the mentioned broad browser support, as of the time of writing this post, the feature is not supported without a polyfill on most iOS browsers. Nevertheless, I won’t change the post and what I’m saying, as I believe that support for these will come very soon.

Spacing Elements in a Flex Container with CSS Gap

So, as we’ve mentioned, CSS Gap works with CSS Grid, but there are many cases where we have elements that need spacing without a defined grid, for example, a flex container.

<div class="flex-gap">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
.flex-gap {
  display: flex;
  flex-wrap: wrap;
}

The flex-wrap property will allow those flex items to wrap in a row according to the parent element’s width.

It looks like this:

1
2
3
4
5
6

And when we narrow the width of the parent element (container) due to the use of flex-wrap:

1
2
3
4
5
6

Spacing with Margins

If we want to add spacing between flex items, we can simply add margin to each of the elements:

.flex-gap {
  display: flex;
  flex-wrap: wrap;
}

.flex-gap > div {
  margin: 6px;
}
1
2
3
4
5
6

And here’s how it looks when we narrow the width of the parent element:

1
2
3
4
5
6

As you can see, the margin works, but it doesn’t provide the same behavior and spacing that CSS Gap does. Note that there’s extra spacing in the latter example around the elements.

Also, it’s important to mention that margin is applied to flex items when the gap property is applied to the flex container.

Spacing with Gap

With CSS Gap spacing, we’ll achieve a situation where the defined spacing is only between the elements themselves, and we won’t get, for example, relative spacing to the container itself. The following example will clarify what I mean…

.flex-gap {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

And it looks like this and remains beautiful:

1
2
3
4
5
6

1
2
3
4
5
6

Of course, you can write it like this as well to control the top/bottom spacing versus left/right:

.flex-gap {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 12px;
}

Or like this with different spacing between the two:

.flex-gap {
  display: flex;
  flex-wrap: wrap;
  row-gap: 12px;
  column-gap: 24px;
}

Browser Support

CSS Gap is a feature of both CSS Grid and Flexbox, and currently, it’s supported by all major browsers:

Data on support for the flexbox-gap feature across the major browsers from caniuse.com

However, let’s remember that you can check if the browser supports CSS Gap for Flexbox like this and using the @supports feature:

@supports (gap: 10px) with (display: flex) {
  div {
    display: flex;
    gap: 10px;
  }
}

That’s all.

Further Reading & Inspiration:

Roee Yossef
Roee Yossef

I develop websites & custom WordPress themes by design. I love typography, colors & everything between, and aim to provide high performance, seo optimized websites with a clean & semantic code.

0 Comments...

Leave a Comment

Up!
Blog