gap in CSS: the spacing that ended years of margin workarounds

Before gap arrived, evenly spacing out items in a list meant a familiar workaround: setting a margin on every item, then canceling that margin on the first or last one to avoid an unwanted gap at the edge. gap solves that problem in one move, with no extra selector and no exception to manage.

It comes up whenever cards, buttons, grid columns, or form fields need even spacing, with no space leaking out past the container's edges.

Definition

gap is the property that sets the space between items inside a Flexbox container or a CSS Grid container, without ever adding space before the first item or after the last.

.container {
  display: flex;
  gap: 1rem;
}

Every flex item stays exactly one rem away from its neighbors, across the whole row, with not a single margin set on the children themselves.

row-gap and column-gap

gap is actually a shorthand for two separate properties, useful when horizontal spacing needs to differ from vertical spacing.

.grid {
  display: grid;
  row-gap: 2rem;
  column-gap: 1rem;
}

/* one-line equivalent */
.grid {
  display: grid;
  gap: 2rem 1rem;
}

If only one value gets passed to gap, it applies to both directions at once, which covers the vast majority of everyday use cases.

Why it arrived after years of margin workarounds

On Flexbox, gap arrived several years after the other alignment properties, which explains why so much older code still handles spacing with margins and selectors like :not(:last-child). Before gap, a row of evenly spaced cards required writing something like this.

.card:not(:last-child) {
  margin-right: 1rem;
}

That technique works, but it breaks down as soon as flex-wrap enters the picture: the right margin on the last item of each intermediate row creates uneven spacing, which gap simply eliminates by handling both dimensions at once, row by row and column by column.

A concrete example

A photo grid with even spacing shows off exactly how much simpler gap is compared to the margin-based approach.

.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

Every photo stays one rem away from its neighbors, in both directions, with not a single exception selector needed to handle the grid's edges.

The browser support pitfall

gap was long reserved for CSS Grid before becoming available on Flexbox, which explains why some older projects still rely on margins on flex containers out of caution.

Frequently asked questions

No, gap only affects items that actually take part in the flex or grid container's normal flow. An item positioned with absolute is pulled out of that flow, and gap ignores it completely, whether it sits at the start, the middle, or the end of the container's children.

Yes, a percentage in gap gets calculated relative to the container's size, which allows spacing that grows or shrinks proportionally with the available width, rather than a fixed spacing in pixels or rems that stays identical regardless of screen size.

gap never adds space outside the group of items, only between them, while a margin set on every child also adds space at the group's outer edges, unless that margin gets manually canceled on the first and last item. gap avoids that calculation entirely.