Caniuse: {row,column}-gap, applied to multicolumn, flex, and grid layouts

[chharvey]

CSS Align 3 redefines the row-gap and column-gap properties, extending them to layouts other than multicolumn.

multi-column elements

column-gap specifes the gutter between adjacent column boxes. See [CSS-MULTICOL-1] for details on how this affects the layout of multicol elements. row-gap does not currently apply.

flex containers

When applied to the main axis (e.g. column-gap in a row flex container), indicates minimum spacing between items, as if a fixed-size margin were inserted between adjacent flex items in a single line.
When applied to the cross axis (e.g. row-gap in a row flex container), indicates minimum spacing between adjacent flex lines.

grid containers

The row-gap and column-gap properties, when specified on a grid container, define the gutters between grid rows and grid columns, respectively. See CSS Grid Layout 1 §10.1 Gutters: the grid-column-gap, grid-row-gap, and grid-gap properties for precise details.

Furthermore, the generic properties will override the grid-row-gap and grid-column-gap properties, respectively, which are specific to grid layout only.

And lastly, the gap shorthand specifies row and column gaps at once, also overriding grid-gap.

[chharvey]

update: Chrome has added the unprefixed properties for grid layout in v66:
https://www.chromestatus.com/feature/4986266210795520

[jonathantneal]

What can we do to help progress this?

[jonathantneal]

Available in Edge 16
Available in Chrome 66
Available in Firefox 61
Available in Safari 11.2

Related: https://blogs.igalia.com/mrego/2018/04/04/getting-rid-of-grid-prefix-on-css-grid-layout-gutter-properties/#implementation

you can use the unprefixed version since Chrome 66.0.3341.0 and Safari Technology Preview 50

Related: https://twitter.com/gregwhitworth/status/903663677848526848

CSS Grid ships (in a customer release) in Microsoft Edge on Oct 17, mark your calendars. This includes the "new" row-gap, column-gap, gap aliases of grid-row|column-gap properties that the @csswg agreed on in August.

[benface]

gap properties for Flexbox are only supported in Firefox Nightly (version 63.0a1) AFAIK.

[dskoziol]

This doesn't seem to be supported yet in Chrome, for Flexbox

[mikkorantalainen]

This needs to track gap support for flexbox, grid and multicolumn separately. It looks like no browser is going to immediately support gaps for all layouts.

[ExE-Boss]

Mozilla Firefox already supports it in all layouts.

[OliverJAsh]

Chrome has renamed the CSS properties, but they do not yet work with flexbox.

Chrome's flexbox gutter support can be tracked here: https://bugs.chromium.org/p/chromium/issues/detail?id=762679.

There's no entry on https://www.chromestatus.com/ yet, so I've filed a request to add it.

[OliverJAsh]

I raised a PR to add this: https://github.com/Fyrd/caniuse/pull/4961

Also, I'm trying to build some momentum on this, because it's really important but few browsers are picking it up: https://twitter.com/OliverJAsh/status/1139981721879928832. Please RT!

[Fyrd]

Support in flexbox added by @OliverJAsh now available at https://caniuse.com/#feat=flexbox-gap

[OliverJAsh]

Shall we close this now?

[chharvey]

@Fyrd , @OliverJAsh — Looks like all the cases covered in my OP are live. I’ll go ahead and close; feel free to reopen if there are any outstanding issues. Thank you for all your hard work!