gap

gap sets the gutters between rows and columns in Grid, between items and lines in Flexbox, and between columns in multicolumn layout. It does not add space around the outside of a container.

It is shorthand for row-gap followed by column-gap. With one value, both use it. In horizontal Grid writing, rows are vertical and columns horizontal; writing modes and flex direction can change how those axes appear.

Smallest working example

<div class="cards">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
</div>

.cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
}
/* Optional presentation */
.cards > div {
  background: #dbeafe;
  padding: 1rem;
}

There is 8px between the rows and 24px between the columns. The grid’s outer edges receive no gap. Change the declaration to 1rem to make both gutters equal.

Values and defaults

Use nonnegative lengths or percentages. The initial longhand value is normal: it computes to zero in Grid and Flexbox, while multicolumn layout uses its own normal column gap. The property is not inherited.

Percentages resolve against the container’s corresponding content-box size. If that size is indefinite, cyclic percentages have special layout behavior: Grid uses zero for intrinsic contribution calculations and resolves the gap during layout, while Flexbox’s cyclic percentage gaps resolve to zero. A length such as 1rem avoids that ambiguity.

A practical row of actions

<div class="actions">
  <button type="button">Save draft</button><button type="button">Preview</button
  ><button type="button">Cancel</button>
</div>

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
/* Optional presentation */
button {
  font: inherit;
  padding: 0.5rem 0.75rem;
}

The same gap separates buttons and any wrapped lines. Add container padding when you also need space around the group.

Why spacing may look different

Item margins and justify-content distribution can add visible space on top of gap. gap does not space ordinary block children in normal flow. Flex gap support arrived later than Grid gap support, so check the layout-specific compatibility entries for older browsers.

Sources and browser support

MDN: gap describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.