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:
And when we narrow the width of the parent element (container) due to the use of flex-wrap:
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;
}And here’s how it looks when we narrow the width of the parent element:
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:
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:
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.
