gap
The gap property sets the space between rows and columns in a grid or flex container. It is shorthand for row-gap and column-gap, accepting one value for both or two values to set each separately.
Definition
gap sets the size of the gutters between tracks in a grid or flex container — the space that separates one row from the next and one column from the next. It is a shorthand that sets two longhand properties at once: row-gap (the space between rows) and column-gap (the space between columns). Because it lives on the container, a single declaration spaces the entire layout consistently.
The defining nuance is that gap adds space only between tracks, never around the outer edge of the container. A grid with gap: 1rem has one-rem gutters between its cells but sits flush to its own border; outer spacing is still the job of the container's padding. Originally a Grid property (once named grid-gap), gap now works in flex containers too, which is why it is the modern way to space any track-based layout. Because it is set once on the container rather than on each child, adjusting the whole layout's rhythm is a single edit — there are no per-item margins to keep in sync, and adding or removing items never leaves a stray gutter behind.
Syntax
/* one value: same gap for rows and columns */
gap: 1rem;
/* two values: row-gap first, then column-gap */
gap: 12px 24px;
/* equivalent longhands */
row-gap: 12px;
column-gap: 24px;Parameters
| Value / longhand | Effect |
|---|---|
row-gap | The gutter between rows — vertical space separating one row track from the next. When gap gets one value, that value is used here; with two values it is the first. |
column-gap | The gutter between columns — horizontal space separating one column track from the next. When gap gets one value, that value is used here too; with two values it is the second. |
One-value versus two-value syntax: gap: 1rem is the one-value form and applies the same gutter to rows and columns. gap: 12px 24px is the two-value form — the first value is the row-gap, the second is the column-gap. Any CSS length or percentage is accepted for either; negative values are not allowed.
Return value
As a CSS property, gap has no return value — its effect is the spacing it produces. It inserts the requested gutter between adjacent tracks (and between adjacent flex items), pushing them apart without adding margin to any individual item. The tracks themselves keep their sizes; the gutters occupy space *between* them, so a two-column repeat(2, 1fr) grid with gap: 2rem gives each column a little less width to make room for the 2rem gutter between them.
- Applies between rows and columns in a grid container, and between items in a flex container.
- Adds space only between tracks — never before the first track or after the last.
- The gutter is subtracted from available space before flexible (
fr) tracks are sized.
Examples
One value — equal gutters
.container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem; /* 1rem between every row and column */
}Two values — different row and column gaps
gap in a flex container
row-gap and column-gap as separate longhands
gap on a wrapping flex container spaces both axes
gap between items in a column-direction flex stack
Browser & runtime support
gap in grid containers is universally supported; gap in *flex* containers arrived later but is now supported across every current browser. If you need to support very old flex engines, fall back to margins; for modern targets gap is the clean choice in both layout models. To shape the tracks that gap spaces, see the grid-template-columns property.
Frequently asked questions
What is the difference between gap, row-gap and column-gap?
gap is shorthand for both longhands. row-gap sets the vertical space between rows and column-gap the horizontal space between columns. gap: 12px 24px sets row-gap to 12px and column-gap to 24px.Does one-value gap apply to both rows and columns?
gap: 1rem uses the same 1rem gutter between rows and between columns. Provide two values, like gap: 8px 40px, to control the row gap and column gap independently.Does gap work with Flexbox?
gap in flex containers, where it adds space between items on both the main and cross axis. It is the cleanest replacement for spacing flex items with margins.Does gap add space around the outside of the grid?
gap only adds gutters between tracks, never before the first or after the last. For spacing around the outer edge, use the container's padding instead.