CSS row-gap Property

Definition and Usage

The row-gap property sets the size of the gutter between rows. It works on grid, flex, and multi-column containers.

It is the longhand for the row half of gap. Pair it with column-gap when you want different horizontal spacing. The property is not inherited. The initial value is normal (0 in grid and flex; 1em in multi-column).

CSS Syntax

Example: row-gap: 20px;. Negative values are invalid. Percentages refer to the container’s block size when that size is definite.

Property Values

Gaps sit between rows only — never before the first row or after the last.

How to Use row-gap

Make a multi-row container, then set the vertical gutter on that container.

1. Set display: grid, display: flex, or a multi-column layout on the container.
2. Ensure there is more than one row (grid tracks, flex-direction: column, or flex-wrap: wrap).
3. Add row-gap with a length, percentage, or normal.
4. Use column-gap or gap when you also need horizontal spacing.

Live Preview

A two-column grid. Only row-gap changes. Column spacing stays fixed so you can see the vertical gutters clearly.

CSS Examples

Each snippet focuses on row-gap. Extra styles stay minimal for study. Use Try It Yourself for a live editor.

<style>
  section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 20px;
    column-gap: 12px;
  }
</style>

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</section>

<style>
  section {
    display: flex;
    flex-direction: column;
    row-gap: 16px;
  }
</style>

<section>
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</section>

<style>
  section {
    display: flex;
    flex-wrap: wrap;
    width: 220px;
    row-gap: 16px;
    column-gap: 8px;
  }
  div {
    width: 100px;
  }
</style>

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</section>

Key Takeaways