W3docs
en
Log in

CSS grid-row-gap Property

Learn how CSS grid-row-gap sets gutter space between grid rows, with syntax, values, live examples, and tips for using the modern row-gap alias.

The grid-row-gap CSS property sets the size of the gap (the gutter) between the rows of a grid container. It inserts space between rows — never before the first row or after the last one — so it won't create unexpected outer margins.

This property only affects elements whose display is grid or inline-grid. It has no effect on flexbox or multi-column layouts; for those, use the standard column-gap property or the universal gap shorthand instead.

Info

grid-row-gap is now an alias for the standard row-gap property, which works across grid, flexbox, and multi-column layouts. Browsers treat them identically inside a grid context. Prefer row-gap (or the grid-gap shorthand that sets both axes at once) in new code. grid-row-gap remains valid and is kept for backward compatibility.

Quick reference

Initial valuenormal (treated as 0 in grid)
Applies toGrid containers
InheritedNo
AnimatableYes
SpecCSS Grid Layout Module Level 1
DOM syntaxelement.style.gridRowGap = "30px"

When to use it

Reach for grid-row-gap when you want predictable vertical spacing between grid rows without relying on margins on individual grid items. Margins between grid items are awkward — they collapse unevenly, add space at the edges, and are harder to update globally. A row gap, by contrast, sits only between rows and keeps the grid's outer edges flush, which makes spacing easy to reason about.

Combine it with grid-column-gap for horizontal spacing, or replace both with the grid-gap shorthand when you want to set row and column gutters at the same time.

Syntax

/* keyword */
grid-row-gap: normal;

/* absolute length */
grid-row-gap: 20px;
grid-row-gap: 1.5em;

/* percentage of the container's block size */
grid-row-gap: 10%;

/* global values */
grid-row-gap: inherit;
grid-row-gap: initial;
grid-row-gap: unset;

Values

ValueDescription
normalThe browser's default spacing. Resolves to 0 inside a grid container.
<length>A non-negative CSS length value (px, em, rem, vw, etc.).
<percentage>A non-negative percentage resolved against the grid container's block-axis (height).
inheritTakes the computed value from the parent element.
initialResets the property to its initial value (normal).
unsetActs as inherit if the property is inheritable, otherwise as initial.

Examples

No row gap (default)

With grid-row-gap: 0, rows sit directly next to each other with no vertical gutter. Only the grid-column-gap separates items horizontally.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-column-gap: 20px;
        grid-row-gap: 0;
        background-color: #666;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-row-gap property example</h2>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div class="box8">8</div>
    </div>
  </body>
</html>
Try it Yourself »

![CSS grid-row-gap example with no row gap](/uploads/media/default/0001/04/4123ae945c3b6e7b25f0fc5911ae459f604c3c1c.png "CSS grid-row-gap example with no row gap" =420x)

Fixed pixel gap

Setting grid-row-gap: 40px adds a 40-pixel gutter between every pair of rows. The column gap remains separate and is controlled independently by grid-column-gap.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-column-gap: 20px;
        grid-row-gap: 40px;
        background-color: #666;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-row-gap property example</h2>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
      <div>10</div>
      <div>11</div>
      <div>12</div>
    </div>
  </body>
</html>
Try it Yourself »

Percentage gap

A percentage value is resolved against the grid container's block size (its height). This means the gap grows proportionally when the container is taller, which can be useful for fluid, aspect-ratio-sensitive layouts. For most content layouts a fixed px or rem value is more predictable.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-row-gap: 15%;
        grid-column-gap: 3%;
        background-color: grey;
        padding: 40px;
      }
      .grid-container > div {
        background-color: white;
        text-align: center;
        padding: 25px;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
    </div>
  </body>
</html>
Try it Yourself »

Migrating to the modern row-gap

The CSS Grid specification later aligned with the multi-column and flexbox gap conventions, renaming grid-row-gap to row-gap. The two are interchangeable inside a grid context, but row-gap also works in flexbox and multi-column containers. The migration is a one-line rename:

/* Legacy — still valid, but prefer row-gap in new code */
grid-row-gap: 20px;

/* Modern equivalent */
row-gap: 20px;

/* Shorthand: sets row-gap and column-gap at once */
gap: 20px 10px;   /* row-gap: 20px; column-gap: 10px */
gap: 20px;        /* both row-gap and column-gap: 20px */

All major browsers have supported row-gap for grid since early 2020, so there is no practical compatibility reason to keep using the grid-row-gap name in new projects.

Common gotchas

  • Percentage gaps and intrinsic height. When the grid container has no explicit height, the browser cannot resolve a percentage row gap until it knows the container's height — which in turn depends on the content. This circular dependency can cause the gap to resolve to 0. Use px or rem unless the container has a fixed height.
  • Negative values are not allowed. Unlike margins, grid-row-gap only accepts zero or positive values. Attempting to set a negative gap is invalid and the declaration is ignored.
  • The gap does not add outer space. grid-row-gap adds space only between rows. If you need padding around the entire grid, use the container's padding property.
  • Spanning items are not affected. An item that spans multiple rows with grid-row: span 2 still benefits from the gap between those rows as part of its allocated space.

Practice

Practice
What is the purpose of the 'grid-row-gap' property in CSS?
What is the purpose of the 'grid-row-gap' property in CSS?
Was this page helpful?