The CSS gap Property in Flexbox and Grid

The gap property puts consistent space between the items in a flex or grid container, without touching the items themselves. It replaces a long-standing workaround — adding margins to every child and then subtracting that margin back out on the container’s edges — with a single line on the parent.

The old way, and why it was awkward

Before gap was supported for flexbox, spacing items apart meant giving every child a margin:

.old-way > * {
  margin-right: 16px;
}
.old-way > *:last-child {
  margin-right: 0;
}

This works, but it’s brittle. The :last-child exception is easy to forget, it falls apart the moment items wrap onto a new row (now you need vertical spacing rules too), and it puts spacing logic on the children instead of the parent, which is backwards — spacing between items is a property of the layout, not of any individual item.

How gap works

gap is set on the container, not the children, and it works the same way in both flex and grid contexts:

.container {
  display: flex; /* or grid */
  gap: 16px;
}

That one line puts 16px of space between every pair of adjacent items, on every row and column, including wrapped rows — no :last-child exception needed, because gap only ever inserts space between items, never around the outer edge of the container.

gap is actually shorthand for two longhand properties, and grid layouts commonly use them independently:

.grid-container {
  display: grid;
  row-gap: 24px;
  column-gap: 16px;
  /* equivalent shorthand: gap: 24px 16px; */
}

In a flex container, row-gap and column-gap still apply, but which one governs spacing depends on flex-direction and whether items wrap — column-gap controls the space along the main axis in a row layout, row-gap controls the space between wrapped rows.

Why this is better than margin

The core advantage isn’t just less code — it’s that gap doesn’t add space at the container’s outer edge. A margin-based approach spaces items apart but also, unless you specifically subtract it back out, adds unwanted space to the left of the first item and the right of the last one, since margin is a property of the child regardless of its position. gap, defined as space between siblings, never does this. Padding on the container remains the correct tool for space around the outside of the group; gap is the correct tool for space within it. Used together, they cleanly separate two things that margin-based layouts used to conflate.

gap also composes cleanly with justify-content and align-items in flexbox, and with grid-template-columns in grid — see CSS Grid vs Flexbox for how the two layout modes divide responsibilities. Whichever one you’re using, gap behaves identically, which makes it one of the few CSS properties that genuinely doesn’t require relearning when you switch between the two.

A quick example

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px;
}

Every card in this grid gets 24px of space from its neighbors on all sides, and that spacing holds up automatically as the number of columns changes at different viewport widths — nothing about the gap rule needs to change alongside a responsive column count.

Browser support and practical notes

gap support in grid layouts predates its support in flexbox by a couple of years, which is a historical wrinkle worth knowing if you’re referencing older documentation or Stack Overflow answers — some older guidance claims gap doesn’t work in flexbox at all. That’s no longer true in any evergreen browser; gap is fully supported in both flex and grid contexts today; there’s no browser-support reason left to prefer the margin workaround. It has no effect on display: block or display: inline layouts — it only applies within flex and grid containers, and (less commonly used) multi-column layouts.

The takeaway

gap replaces margin-and-subtract hacks with a single, predictable property that spaces items apart without leaking space to the container’s outer edge, and it behaves identically whether the container is flex or grid. If a codebase is still adding margin to every child and stripping it from the last one, that’s a straightforward, low-risk swap to gap on the parent.