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

Category: CSS
Type: New or changed feature
Status: Enabled by default (Chrome 84)
Intent stage: Shipped

Breaking change: No
Enterprise impact: None
Spec maturity: Working draft
Web Platform Tests: Yes

WPT details: 5/28 update after implementation: there are now about 25 tests, all in WPT. From I2P: Not yet _fully_ tested. There are 4 tests at https://wpt.fyi/results/css/vendor-imports/mozilla/mozilla-central-reftests/flexbox?label=master&label=experimental&aligned&q=row-gap

Summary

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

Motivation

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/

Standards & signals

Specification: https://www.w3.org/TR/css-align-3/#column-row-gap
Firefox: Shipped/Shipping
Safari: No signal
Web developers: Positive — 345 stars
Tracking bug: https://crbug.com/762679

Ecosystem

Web Platform Tests: https://wpt.fyi/results/?q=row-gap
Chrome Platform Showcase: https://chrome-platform-showcase.paulkinlan-ea.deno.net/features
GenDN reference: https://gendn.paulkinlan-ea.deno.net/features
chrome.dev demos search: https://www.google.com/search?q=site%3Achrome.dev+Gutters%20in%20flexbox%3A%20row-gap%20and%20column-gap%20properties
MDN Web Docs: https://developer.mozilla.org/en-US/search?q=Gutters%20in%20flexbox%3A%20row-gap%20and%20column-gap%20properties
Baseline status: https://webstatus.dev/?q=Gutters%20in%20flexbox%3A%20row-gap%20and%20column-gap%20properties

Docs: https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap

Samples: https://jsbin.com/jibudiyene/edit?html,css,output

Explainers: https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap#Flex_layout

View on chromestatus.com