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:

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 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:

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:

• How to detect browser support for Flexbox Gap.
• Chromium lands Flexbox gap.
• CSS Gap Space with Flexbox.