# Flexbox Spacing Between Items: Examples

You need to master both Flexbox and CSS Grid in order to professionally build modern websites & web apps. If you haven't mastered both of them yet, I highly recommend going through my [CSS Course](https://bytegrad.com/courses/professional-css?utm_source=blog-post&utm_medium=blog-post&utm_campaign=blog-post).

In the past, if you wanted to create space between flex-items, you had to use the good ol' margin property.

That came with certain issues, so today we have a better solution: the 'gap'-properties.

These actually come from CSS Grid, but since Flexbox and CSS Grid are being harmonized (so we can use the same properties in both systems) we can now also use these with Flexbox.

So there is `column-gap`:

![CSS Flexbox default layout with column-gap.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636673022924/G74-4FFFA.png align="left")

And `row-gap`:

![CSS Flexbox default layout with row-gap.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636673040396/OV6XLCCSf.png align="left")

And `gap`:

![CSS Flexbox default layout with gap.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1636673053792/4TdPYkkbj.png align="left")

These properties were previously called 'grid-column-gap', 'grid-row-gap' and 'grid-gap', but like I said, they're now available in Flexbox too so the 'grid-' prefix was dropped.

Note that the 'gap'-properties [won't work properly in Internet Explorer](https://caniuse.com/?search=column-gap).

By the way, I think CSS is the 'bottleneck' to most websites & web apps. I believe it's the highest-ROI skill you can master.

Before I mastered CSS, I lost a ton of time & energy fiddling around with CSS.

I was learning about advanced JavaScript topics when I couldn't even implement basic layouts in CSS...

So I created a CSS course to help you avoid the same mistake. Check it out [here](https://bytegrad.com/courses/professional-css?utm_source=blog-post-2&utm_medium=blog-post-2&utm_campaign=blog-post-2) if you're interested.

Would you like to be notified when I release a new course? You'll get early bird discounts. Sign up for my newsletter [here](https://email.bytegrad.com).

Also, I show projects of upcoming courses on social media, follow me here:

[Facebook](https://www.facebook.com/ByteGrad)[Twitter](https://twitter.com/bytegradcom)[Instagram](https://www.instagram.com/bytegradcom/)