At the time of writing
gap is supported in desktop Firefox 63, Firefox for Android 63, and Chromium 84 (desktop and Android). See Browser compatibility for updates.
gap is the spacing between children. You may have heard of this type of spacing being called "gutters" or "alleys". It's space only where the children box edges touch.
gap is flow relative, meaning it changes dynamically based on the direction of content flow. For example,
gap will automatically adjust for the different
direction values that you set for your international users. This significantly eases the burden of spacing challenges for the component and CSS author. Less code scaling further.
Gap can be passed 1 length, which will be used for both row and column.
Gap can be passed 2 lengths, which will be used for row and column.
gap was in Flexbox, strategies involved negative margins, complex selectors,
:first type pseudo-class selectors, or other means to manage the space of a dynamically layed-out and wrapping set of children.
The following are patterns that folks have used to get gap-like spacing.
The above are not a full replacement for
gap though, and often need
:lang() adjustments to account for wrapping scenarios, writing modes or direction. Adding one or two media queries doesn't seem so bad, but they can add up and lead to complicated layout logic.
What the above author really intended was to have none of the child items touch.
The Antidote: gap
The ownership of the spacing shifts from the child to the parent
In the first 2 examples (without Flexbox
gap), the children are targeted and assigned spacing from other elements. In the antidote gap example, the container owns the spacing. Each child can relieve itself of the burden, while also centralizing the spacing ownership. Simplifying consistency. Reorder, change viewports, remove elements, append new elements, etc. and spacing remains consistent. No new selectors, no new media queries, just space.
Chromium DevTools updates
With these updates come changes to Chromium DevTools, notice how the Styles pane handles
gap now 👍
DevTools supports both
gap, this is because
gapis essentially an alias to the previous syntaxes.
New layout potential
gap, we unlock more than convenience. We unlock powerful, perfectly spaced, intrinsic layouts. In the video and following code sample below, Grid cannot achieve the layout that Flexbox can. Grid must have equal rows and columns, even if they're intrinsically assigned.
Also, notice how dynamic the spacing between children is when they wrap intrinsically like that. Media queries can't detect wrapping like that to make intelligent adjustments. Flexbox
gapcan, and will, do it for you across all internationalizations.
In addition to Flexbox supporting the
gapsyntax, multi-column layouts also support the shorter