CSS grid-row-gap Property

Definition and Usage

The grid-row-gap property sets the vertical gutter between rows in a CSS grid container. Negative values are invalid. Gaps appear only between rows, not on the outer edges.

Prefer the modern name row-gap. Use gap when you want row and column gutters together, and grid-column-gap / column-gap for horizontal spacing.

CSS Syntax

Same values as row-gap. Example: grid-row-gap: 1rem;

Property Values

How to Use grid-row-gap

Make a grid, then set the space between its rows.

1. Set display: grid on the container.
2. Define columns/rows with grid-template-columns (and rows if needed).
3. Add grid-row-gap (or better, row-gap) with a non-negative length or percentage.
4. Use gap if you also need column spacing in one declaration.

Live Preview

The 2×2 grid stays fixed. Change only grid-row-gap and watch the vertical gutters.

CSS Examples

Each snippet focuses on grid-row-gap. A minimal grid scaffold is included so the gutter is visible. Use Try It Yourself for a live editor.

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

<div class="grid">
  <div>1</div><div>2</div>
  <div>3</div><div>4</div>
</div>

<style>
  .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 1.5rem;
  }
</style>

<div class="grid">
  <div>1</div><div>2</div>
  <div>3</div><div>4</div>
</div>

<style>
  .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-row-gap: normal;
  }
</style>

<div class="grid">
  <div>1</div><div>2</div>
  <div>3</div><div>4</div>
</div>

Key Takeaways