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

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

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