Gutters in flexbox: row-gap and column-gap properties

This css property allows you to specify spacing between flex items and/or flex lines.

Developers can get close to this functionality with the margin and padding properties but there are limitations. Cribbing from https://gist.github.com/OliverJAsh/7f29d0fa1d35216ec681d2949c3fe8b7 : margin collapsing would break gutters when nesting gutter containers, e.g. https://jsfiddle.net/OliverJAsh2/Lwxyt07p/6/ any width specified on the gutter item would not be inclusive of the gutter, e.g. https://jsfiddle.net/OliverJAsh2/p8e50c6m/1/

Demo

Documentation

Specification

Working draft or equivalent

Status in Chromium

Blink>Layout>Flexbox


Enabled by default (tracking bug) in:

  • Chrome for desktop release 84
  • Chrome for Android release 84
  • Android WebView release 84

Consensus & Standardization

After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.

Owner

Intent to Prototype url

Intent to Prototype thread

Last updated on 2020-05-29