row-gap

row-gap creates internal space between Grid rows and, in Flexbox, between items or flex lines depending on direction. It does not add an outer margin.

Separate two grid rows

The 20px gutter is between tracks, while the boxes’ padding stays inside them.

<div class="grid">
  <p>First row</p>
  <p>Second row</p>
</div>

.grid {
  display: grid;
  row-gap: 20px;
}
p {
  background: #dbeafe;
  padding: 0.75rem;
  margin: 0;
}

Separate items in a column flex layout

Because flex-direction is column, row-gap separates the stacked items. No wrapping or extra container height is required.

<div class="controls">
  <button type="button">One</button><button type="button">Two</button>
</div>

.controls {
  display: flex;
  flex-direction: column;
  align-items: start;
  row-gap: 0.75rem;
}
button {
  padding: 0.75rem;
  font: inherit;
}

Values and defaults

The initial value is normal and the property is not inherited. In Grid and Flexbox, normal resolves to zero. Explicit gaps accept nonnegative lengths and percentages; percentage row gaps depend on the content-box block size and definiteness. Grid cyclic percentage sizing can resolve to zero for intrinsic sizing, then produce a nonzero laid-out gap. Negative gaps are invalid.

Common mistakes

In a row-direction wrapping flex layout, row-gap separates lines, not items on each line. In vertical writing modes, Grid’s rows follow the block axis rather than an assumed physical vertical axis. A later gap shorthand resets row-gap; its first value sets row-gap and second sets column-gap. Newer multicol row wrapping/gap decorations and keyword syntax have separate support considerations.

Learn column-gap, gap, and writing-mode.

Sources and browser support

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