The CSS "gap" property is not only for Grid

04 Jul, 2022

When I first learned CSS Grid, I associated the "gap" property almost exclusively with grid layouts. That made sense at the time: older examples often used names like "grid-gap", "grid-row-gap", and "grid-column-gap".

But "gap" is not Grid-exclusive.

Today, "gap" is a general spacing property that works across multiple CSS layout modes, including:

CSS Grid
Flexbox
Multi-column layout

That means this is perfectly valid:

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

And so is this:

.cards {
  display: grid;
  gap: 1.5rem;
}

The benefit is simple: "gap" lets the container control the spacing between its children without adding margins to every item.

Before using "gap" with Flexbox, many layouts relied on patterns like this:

.item {
  margin-right: 1rem;
}

.item:last-child {
  margin-right: 0;
}

Or more complicated variants when wrapping was involved.

With Flexbox gap, the spacing belongs where it should: on the parent layout container.

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

This is cleaner, easier to maintain, and usually more predictable than managing margins on individual children.

One useful thing to remember is that "gap" is shorthand for:

gap: row-gap column-gap;

So you can define one value:

.container {
  gap: 1rem;
}

Or separate vertical and horizontal spacing:

.container {
  gap: 1rem 2rem;
}

In Grid, that maps naturally to rows and columns. In Flexbox, the exact meaning depends on the flex direction and whether items wrap, but the idea is the same: it controls spacing between flex items and flex lines.

So the takeaway is:

"gap" started with strong Grid associations, but it is now a broader layout spacing tool. Use it with Grid, use it with Flexbox, and avoid unnecessary margin hacks when the spacing is really a responsibility of the parent layout.

#css #web

Originally published on Bear.