CSS gap arrives in Chromium's Flexbox and multi-column engines

The CSS gap property is now supported in Chromium for both CSS Flexbox and Multi-Column layout engines. The property is flow relative, so it responds to the content's direction and writing mode. That means spacing automatically adapts for international users when writing-mode or direction changes, removing a set of conditional layout rules from your CSS.

Browser support

Support for the unification of gap syntax is available in Chrome 57, Edge 16, Firefox 52, and Safari 10.1.

Usage

The gap property accepts any CSS length or percentage. Pass a single value to set the same spacing for rows and columns:

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

Or pass two values to set rows and columns separately:

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

Both forms expand to the corresponding row-gap and column-gap longhand properties, which can also be set individually with 1 length each.

Flexbox spacing without hacks

Before gap, managing space between Flexbox children typically involved negative margins, complex selectors, or pseudo-class trickery. These workarounds often fail to handle wrapping content, writing modes, or direction changes gracefully, and they frequently need @media or :lang() overrides to keep spacing correct. Each media query required is one more place for layout bugs to surface.

Common previous patterns include pseudo-class selectors that target :last or :first children to adjust margins, as well as the lobotomized owl selector, which applies margins to all siblings based on their position. Neither approach fully replaces gap; they require mounting complexity as containers change.

With Flexbox gap, the container owns the spacing. Children no longer need self-targeted selectors, and the layout remains consistent across reordering, viewport changes, or dynamic content insertion. No new selectors or media queries are required to keep items from touching.

New layout possibilities

Beyond convenience, Flexbox gap enables intrinsic layouts that CSS Grid cannot achieve. Grid requires equal rows and columns, even when they're intrinsically sized, whereas Flexbox can wrap children with fluid spacing between them. Media queries cannot detect native wrapping behavior to make the same intelligent adjustments; Flexbox gap handles it automatically across all internationalization settings.

Multi-column layouts also benefit

The shorter gap syntax works for multi-column layout as well:

article {
  column-width: 40ch;
  column-gap: 5ch;
  gap: 5ch;
}

DevTools recognizes both syntaxes

Chromium DevTools has been updated to handle the property in the Styles pane. It supports both grid-gap and gap, since gap serves as an alias to the previous syntax, easing the transition between the two.