Flexbox Gap

Posted onby admin

Cory Rylan

- 3 minutes

  • The gap CSS property sets the gaps (gutters) between rows and columns. It is a shorthand for row-gap and column-gap.
  • The curious case of flexbox gap and Safari The gap property was first introduced to add inner grid spacing but was extended in the spec to work with flexbox. With one line of code, you can replace something like this.
  • Flexbox gap to the rescue# The new row-gap and column-gap properties make things much easier. It will be enough to specify from the value in the container styles in order to expand the flex items: As with the grid, the entry can be shortened slightly by using the gap property: gap: 40px 20px. No more negative margins and unwanted margins.
  • Flexbox is going to be taking care of that calculation and when to wrap. You don’t have a media query to rely on any more. But now you do need a more general solution that will guarantee spacing no matter the flow. One possible solution is to use plain ‘ol margin. We can get a reliable 12px separation with margin on all sides.
Updated

The CSS spec has recently been updated to apply gap properties to flexbox elements in addition to CSS grid elements. This feature is supported by Firefox and Chrome at time of writing. The bug tracker page for adding it to webkit/Safari is here. With the gap property, you can get what you want just by adding a column-gap: 1px rule.

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.

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.

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

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.

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! 🎉

Flexbox Gap Mdn

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

Flexbox Gap

Flexbox Gap Caniuse

CaniuseCss tricks flexbox

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.

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

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