search ]

Using CSS Gap with Flexbox

CSS Flexbox and CSS Grid are both powerful tools for managing layouts on websites. Flexbox excels in one-dimensional alignment, while CSS Grid addresses two-dimensional alignment using rows and columns.

In modern web design, there’s often a need to add spacing between elements in a layout — and margins alone are no longer the best solution. This post explores how to create spacing between flex items using the CSS gap property, which is a shorthand for row-gap and column-gap.

While many are familiar with gap from its use in CSS Grid, fewer apply it to flex containers. Given its widespread browser support, as you’ll see later in the post, it’s a feature you should start leveraging to enhance your layouts.

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 along with the 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 pixel-perfect custom WordPress themes, delivering high-performance, SEO-optimized websites. Have a project in mind? need assistance? Feel free to contact me!

0 Comments...

Leave a Comment

To add code, use the buttons below. For instance, click the PHP button to insert PHP code within the shortcode. If you notice any typos, please let us know!