Chromium lands Flexbox gap

Chromium lands Flexbox `gap`

Chromium's CSS Flexbox and Multi-Column layout engines now support gap . grid-gap is old news.

May 7, 2020

Adam Argyle

David Grogan

GitHub

CSS Grid brought a delightful spacing feature called grid-gap , which quickly became a popular way to put space into layouts. It was easy to fall in love with because it took upon itself so much responsibility with such elegance. Starting in Chromium 85 grid-gap is now just gap , and you can use it with Flexbox. 

.layout {

grid-gap : 10px ; gap : 10px ; }

Browser compatibility

At the time of writing gap is supported in desktop Firefox 63, Firefox for Android 63, and planned for Chromium-based browsers as of 85. See Browser compatibility for updates.

Key Term: gap is the spacing between children . You may have heard of this type of spacing being called "gutters" or "alleys". It's space only where the children box edges touch.

gap is flow relative , meaning it changes dynamically based on the direction of content flow. For example, gap will automatically adjust for the different writing-mode or direction values that you set for your international users. This significantly eases the burden of spacing challenges for the component and CSS author. Less code scaling further.

Gap demonstrating localization support, as it handles changes to direction and writing-mode: Codepen | Tweet

gap accepts any CSS length or percentage as a value.

.gap-example {
  display: grid;
  gap: 10px;
  gap: 2ch;
  gap: 5%;
  gap: 1em;
  gap: 3vmax;
}

Gap can be passed 1 length, which will be used for both row and column.

Shorthand

.grid {
  display: grid;
  gap: 10px;
}

Set both rows and columns together at once

Expanded

.grid {
  display: grid;
row-gap: 10px;
column-gap: 10px;
}

Gap can be passed 2 lengths, which will be used for row and column.

Shorthand

.grid {
  display: grid;
  gap: 10px 5%;
}

Set both rows and columns separately at once

Expanded

.grid {
  display: grid;
row-gap: 10px;
column-gap: 5%;
}

Flexbox `gap`

All of that gap goodness we just reviewed is available with Flexbox containers now! Before gap was in Flexbox, strategies involved negative margins, complex selectors, :last or :first type pseudo-class selectors, or other means to manage the space of a dynamically layed-out and wrapping set of children.

Previous Attempts

The following are patterns that folks have used to get gap-like spacing.

pseudo-class selectors

.layout > :not(:last-child) {
  margin-bottom: 10px;
  margin-right: 10px;
}

lobotomized owl

.layout > * + * {
  margin-bottom: 10px; 
  margin-right: 10px; 
}

Source

The above are not a full replacement for gap though, and often need @media query adjustments to account for wrapping scenarios, writing modes or direction. Adding one or two media queries doesn't seem so bad, but they can add up and lead to complicated layout logic.

What the above author really intended was to have none of the child items touch.

The Antidote: gap

.layout {
  display: flex;
  gap: 10px;
}

The ownership of the spacing shifts from the child to the parent

In the first 2 examples (without Flexbox gap ), the children are targeted and assigned spacing from other elements. In antidote gap example, the container owns the spacing. Each child can relieve itself of the burden, while also centralizing the spacing ownership. Reorder, change viewports, remove elements, append new elements, etc and spacing remains consistent. No new selectors, no new media queries, just space.

Chromium DevTools Updates

With these updates come changes to Chromium DevTools, notice how the Styles pane handles grid-gap and gap now 

Devtools shows the both grid-gap and gap, with gap shown used below grid-gap as to let the cascade use the latest syntax.

DevTools supports both grid-gap and gap , this is because gap is essentially an alias to the previous syntaxes.

New layout potential

With flex gap , we unlock more than convenience, we unlock powerful, perfectly spaced, intrinsic layouts. In the video and following code sample below, grid cannot achieve the layout that flex can. grid must have equal rows and columns, even if they're intrinsically assigned.

Also, notice how dynamic the spacing between children is when they wrap intrinsically like that. Media queries can't detect wrapping like that to make intelligent adjustments. Flexbox gap can, and will, do it for you across all internationalizations.

Multi-column `gap`

In addition to Flexbox supporting the gap syntax, multi-column layouts also support the shorter gap syntax.

article {
  column-width: 40ch;

column-gap : 5ch ; gap : 5ch ; }

Pretty cool.

Flex gap wasn't all that came with Chromium 85, either. There was also a big multi-year refactor of flexbox:. Enjoy performance enhancements and new features. It's a great day.

Layout CSS

Last updated: May 7, 2020 Improve article