The gap Property Is No Longer Grid-Only

For years, spacing out flex items meant reaching for justify-content: space-between, fudging margins, or both. CSS Grid improved things with grid-gap, which gave grid cells reliable minimum separation. Flexbox, however, had no built-in answer.

That has changed. The gap property—the successor to grid-gap—now works across Grid, Flexbox, and Multi-Column layouts. It’s shorthand for row-gap and column-gap, so a single declaration like gap: 1em applies evenly in both directions, while gap: 0.5em 1em lets you differentiate rows and columns.

Grid: The Most Predictable Behavior

In a Grid context, gap behaves exactly as you’d expect:

<section>
  <div>div</div>
  <div>div</div>
  <div>div</div>
  <div>div</div>
  <div>div</div>
  <div>div</div>
  <div>div</div>
</section>

Applied to the container, that CSS places a minimum of 1em between each grid cell:

section {
  display: grid;
  grid-template-rows: repeat(2,auto);
  grid-template-columns: repeat(4,auto);
  gap: 1em;
}
section div {
  width: 2em;
}

Note that gaps are additive with margins on the items themselves. If each grid item has margin: 2px, the minimum visual separation becomes 1em plus 4px. Also, resizing the gap causes the grid items to resize to fill their tracks, so the layout reflows cleanly.

Flexbox: Gaps That Don’t Resize Items

Flexbox support for gap uses the same property syntax, but the consequences are different. Consider this setup, using a container identical in structure to the grid example above:

section {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}

Here, gap produces minimum spacing between flex items without triggering item resizing. The trade-off shows up when items wrap: because flex item widths stay fixed (unless you force growth or shrinkage via flex), altering the gap can change where wrapping occurs. That means you might suddenly have fewer items per flex line, but each item’s size won’t adapt to compensate.

Multi-Column: A One-Sided Affair

Multi-Column layouts accept gap with a caveat: only the column direction is honored. If you declare both row and column gaps, the row value is silently ignored. Column gaps, however, work as intended:

section {
  columns: 2;
  gap: 1em;
}

Browser Support

Adoption of gap, row-gap, and column-gap is broadly available. Firefox has shipped support since version 61, and Chromium-based browsers since version 66. Safari has lagged behind, but work by Igalia’s Sergio Villar has brought these properties into the Technology Preview builds of Safari and Mobile Safari.

Whether your layout is grid-based, flex-heavy, or text-forward multicolumn, gap gives you a cleaner alternative to margin hacks for adding breathing room.