W3docs
en
Log in

CSS grid-row-gap Property

The grid-row-gap CSS property defines the size of the gap between the rows. See property description, values and examples.

The grid-row-gap CSS property defines the size of the gap between the rows of a grid container. The gap width can be specified using a length value.

It can be specified in pixels (px) or percentages (%).

Info

The row-gap property is the modern shorthand that sets both grid-row-gap and grid-column-gap. While row-gap is preferred, grid-row-gap remains valid for explicitly targeting row spacing.

Initial Value0
Applies toGrid containers.
InheritedNo.
AnimatableYes. Gap between the rows is animatable.
VersionCSS Grid Layout Module Level 1
DOM Syntaxobject.style.gridRowGap = "30px";

Syntax

CSS grid-row-gap syntax

grid-row-gap: normal | length;

Example of the grid-row-gap property:

CSS grid-row-gap code example

<!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 »

Result

CSS grid-row-gap another example

Here, the gap between rows is specified as 0. In the next example, the gap between rows is 40px.

Example of the grid-row-gap property specified in pixels:

CSS grid-row-gap another code example

<!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 »

Example of the grid-row-gap property specified in percentage:

<!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 »

Values

ValueDescriptionPlay it
normalUses the browser’s default spacing between the rows. This is the default value of this property.
lengthThe gap between rows is specified in px or percentages. Negative values are not allowed. Default value is 0.Play it »
initialMakes the property use its default value.
inheritInherits the property from its parents element.

Practice

Practice

What is the purpose of the 'grid-row-gap' property in CSS?