Tune row-gap and column-gap for Flexbox or Grid, preview the spacing live on real boxes, and copy the ready-to-use CSS.
Space out Flexbox or Grid items cleanly, without the double-margin and edge-spacing problems that come from margin-based gutters.
Switch between a wrapping Flexbox row and a fixed four-column Grid to see how gap behaves in each.
Set row-gap and column-gap separately, or let the tool combine them into the gap shorthand automatically.
Grab the full display, template and gap declarations, ready to paste into your stylesheet.
The gap property (along with its longhand row-gap and column-gap) sets spacing directly between the rows and columns of a Flexbox or Grid container, rather than around or inside individual items. That distinction matters: a margin applied to every item also adds space at the outer edges of the container and, in Flexbox, stacks unevenly between wrapped rows, so developers historically had to zero out the margin on the last item in each row or wrap everything in a negative-margin container. gap avoids all of that by living on the container itself and only ever inserting space between adjacent items. gap was originally a Grid-only feature but has been supported for Flexbox in every major browser for several years now, so it is safe to reach for as the default way to space out any flex or grid layout. The shorthand accepts one length for both axes, or two lengths in the order row-gap then column-gap, and any valid CSS length unit works, not just pixels.
gap: 16px 24px sets row-gap to 16px and column-gap to 24px, in that order.
In Flexbox, gap correctly spaces wrapped rows the same way it spaces items within a single row.
gap accepts px, rem, %, and other length units, not only pixels.
gap is a shorthand CSS property for row-gap and column-gap. It sets the spacing between rows and columns in both Flexbox and Grid layouts without adding margin to individual items.
Yes. gap originally shipped for Grid but is now supported for Flexbox in all modern browsers, where it adds spacing between flex items, including wrapped rows, without the double-margin problem of margin-based spacing.
row-gap sets the space between rows and column-gap sets the space between columns. The gap shorthand accepts one value for both, or two values in the order row-gap then column-gap.
Margin on individual items has to be applied carefully to avoid extra space at the edges of the container and stacks awkwardly between wrapped rows. gap is applied once on the container and only adds space between items, never around the outer edge.
Yes. gap for both Flexbox and Grid is supported in all current major browsers and has been for several years, so it is safe to use without a fallback in almost all projects.
Keep building with these free online CSS tools.