** Quick warning: Gap for Flex currently only works in Firefox **
One of my many favorite parts of the CSS Grid specification is grid-gap. It makes creating "internal margins" to my grids so much easier.
Margins and the hacks we do to clear them in various contexts have long been one of my primary annoyances with CSS. Grid's gap just made so much sense.
As it turns out, it made a lot of sense to others, as well. The W3C has recommended switching grid-gap to simply gap and allowing it in Flexbox and Multi-Column.
In this tutorial, we'll take a look at how we've added margins in the past with Flex and how gap makes it so we can have these internal margins with no hacks.
Margins in a simple Flexbox grid
In this example, we'll take a series of boxes, use Flexbox to create a grid style and then separate the boxes via margins.
We'll start with basic HTML. A flex-container and multiple flex-items.
<div class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</div>
We'll add a small dash of flex to put all the content side-by-side, put in a pinch of a width calculation to size our items and then allow them to wrap with flex-wrap.
.flex-item {
width: calc(100% / 3);
margin-right: 1rem;
margin-bottom: 1rem;
}
This gives us perfectly sized boxes that are 1/3 the width of our container. Let's add some margins to put space in between each item vertically and horizontally.
.flex-item { width: calc(100% / 3); margin-right: 1rem; margin-bottom: 1rem;}
Uh-oh! Our perfectly sized thirds now don't fit three across in our flex layout anymore! That's a nice margin between the rows, though!
We'll need to adjust our width calculation to deal with the additional marginal space. We also need to clear the margin-right from every third item.
We have two 1rem margins now and we need to subtract those 2rem equally from the width of all three items.
flex-item {
// width: calc(100% / 3);
width: calc((100% / 3) - (2rem / 3)); // one-third - two margins divided equally among 3 items
margin-right: 1rem;
margin-bottom: 1rem;
}
.flex-item:nth-child(3n) {
margin-right: 0;
}
Does this seem overly complicated? It does to me. There are easier ways to do this, but they also don't give you perfect 1rem gaps between our columns. This complex code also makes responsive design much more complicated, as well.
Once the gap property is available for use in Flexbox in all browsers, the code gets much cleaner. We can also migrate from setting a width on our items -- a slight code smell to me in a Grid world -- to using flex-grow, flex-shrink and flex-basis properties.
The Gap way of setting internal margins in Flex
By utilizing gap, we get rid of the need to do most of our width hacking. This also allows us to go back to using flex grow/shrink values
In this case, we still have display: flex and flex-wrap: wrap on our container, but now we also add our gap value. This is a short hand that represents both row and column gaps. Check Mozilla Developer Network's documentation for all the different methods.
From there, instead of setting a width on each flex item, we'll set our flex grow, shrink and basis values. flex-basis will be how the browser determines how many columns to create. We'll still be using a calc() for that, but the resulting code is much cleaner.
.flex-container {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.flex-item {
flex: 1 1 calc((100% / 3) - 2rem);
}
The discerning eye will also notice this allows our last items to grow to fill the space of a row that doesn't have enough items. Something that Grid won't do for us and our width-based Flex example won't do.
Bonus: Gap also makes this easier to take responsive
In our original example, if we wanted to change the number of columns at different break points, we'd have to recalculate our width AND change our nth-child selectors to clear the margins.
In our gap example, all we have to do is reset our flex-basis, and we're good to go.
.flex-item {
flex: 1 1 100%; // 1 across at mobile
}
@media (min-width: 640px) {
.flex-item {
flex-basis: calc((100% / 2) - 1rem); // 2 across at tabletish
}
}
@media (min-width: 1024px) {
.flex-item {
flex-basis: calc((100% / 3) - 2rem); // 3 across at desktop
}
}
I won't lie, I still prefer CSS Grid for a design pattern like this, but hopefully you can see multiple use cases for this amazing new feature.
Looking toward the future
Currently, gap is only supported in Firefox. So, if this article got you excited, I humbly apologize! You'll need to wait for the other browsers to catch up on this. Hopefully, they take notice of developers' pain with margins and give us this power sooner rather than later.
Top comments (9)
I read half of the post yesterday, implemented it on the project I’m working on —where te gap was driving me crazy— and...oh, no! Why! Why doesn’t it work! And Firefox? Wait, it does! But I thought I was using normalize.css? I am?? What the...? WHY IS THIS [deleted scene]
And now I understand why : )
Thanks for sharing though, I hope other browsers catch up soon!
Sorry about that! Just put a warning as the first sentence of the post ;)
Probably, shouldn’t be buried at the end, huh? :D
No, it’s 100% my fault for not reading through the end 😅
I totally do it too! That’s why for experimental browser stuff I should post at the top :D
Since you have to specify the alignment, justification, and even just the use of flexbox in the parent, it has never made sense to me that gaps between items had to happen from child spacing properties. This is a much needed improvement, glad it's being worked on!
Completely agree! Though, that WAS the way the web worked. Now that we're getting first-class layout controls, it makes sense to make them ideal and "hackless" :D
Looking forward to be able to use this! I wrote the same functionality for WPF many years ago, and it served very well.
Here's the appropriate link to caniuse:
caniuse.com/#feat=flexbox-gap
Totally should have put that caniuse in the post!
It's never too late ;-)