CSS

CSS Gap Space with Flexbox

Cory Rylan

- 3 minutes

Updated

CSS Flexbox and CSS Grid are fantastic tools available for managing layout on the Web. Flexbox handles single-dimensional layouts very well, while CSS Grid handles two-dimensional layouts with columns and rows. Often we want to add space between the items within our layout. This post will show how to add space between flex items using the CSS gap property and the necessary workarounds for browser support.

Inline Flex

To demonstrate CSS Gap, we will use Flexbox. CSS Gap works in CSS Grid, but there are many cases where we have inline lists that need space without a defined grid.

<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: inline-flex;
flex-wrap: wrap;
}

We use inline-flex to have flex items but display our parent element as an inline element instead of a block element. The flex-wrap: wrap property will allow our items to wrap as the parent container shrinks or is constrained.

CSS Flex Wrap

If we want to add space between each item, we could use margin on each item.

.flex-gap {
display: inline-flex;
flex-wrap: wrap;
}

.flex-gap > div {
margin: 6px;
}
CSS Flex Wrap and Margin Space

Margins works but is not the same behavior as CSS Gap space. Notice the extra space surrounding the boxes. With gap spacing, we only want space applied between the items. Using CSS Gap, we can achieve this.

.flex-gap {
display: inline-flex;
flex-wrap: wrap;
gap: 12px;
}
CSS Flex Wrap with CSS Gap Spacing

CSS Gap is a feature of the CSS Grid spec and Flexbox. Currently Firefox is the only major browser that supports gap on flex items. Update: As of April 25, 2021, CSS Gap for Flexbox is supported in all major browsers! 🎉

To support older browsers that don't support Flex Gap in Flexbox we can use a margin hack to create a close workaround.

<div class="emulated-flex-gap">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
.emulated-flex-gap > * {
margin: 12px 0 0 12px;
}

.emulated-flex-gap {
display: inline-flex;
flex-wrap: wrap;
margin: -12px 0 0 -12px;
width: calc(100% + 12px);
}

We can set margin space on the top and left of each item. On the flex parent element, we use negative margins to counter the excess margin on the outer child elements. This technique will get a similar effect to CSS gap space.

CSS Flex Wrap with CSS Gap Spacing

We can clean up the CSS a bit by using CSS Custom Properties, so it is easier to change the margin spacing.

.emulated-flex-gap {
--gap: 12px;
display: inline-flex;
flex-wrap: wrap;
margin: calc(-1 * var(--gap)) 0 0 calc(-1 * var(--gap));
width: calc(100% + var(--gap));
}

.emulated-flex-gap > * {
margin: var(--gap) 0 0 var(--gap);
}

With this workaround, we can get something close to CSS Gap space in older browsers. With CSS Gap spacing, we can remove much of the white space complexities in CSS when using margins. Check out the full working demo below!

View Demo Code   
 

No spam. Short occasional updates on Web Development articles, videos, and new courses in your inbox.

Related Posts

CSS

Converting CSS Pixels to Rems

Learn how to convert CSS pixel values to rem to provide scalable typography features and improve accessibility with page zoom.

Read Article
Web Components

Simple CSS Custom Property APIs with Web Components

Learn how CSS Shorthand Properties and CSS Custom Properties can simplify Web Component theming APIs.

Read Article
CSS

CSS Tips Vertical Line Rule

Learn how to use CSS and Flexbox to make vertical line rules.

Read Article