X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

CSS grid-row-gap Property

The grid-row-gap property sets the size of the gap between the rows.

It can be specified both by "px" and percentages.

Initial Value normal
Applies to Multi-column elements, flex containers, grid containers.
Inherited No.
Animatable Yes. Gap between the rows is animatable.
Version CSS Grid Layout Module Level 1
DOM Syntax object.style.gridRowGap = "30px";

Syntax

grid-row-gap: normal | length;

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>

Here is an example where the gap between the rows is 40px:

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>

Values

Value Description
normal Uses the browser’s default spacing between the rows. This is the default value of this property.
length The gap between rows is specified by px or percentages. Negative values are not allowed. Default value is 0.
initial Makes the property use its default value.
inherit Inherits the property from its parents element.

Practice Your Knowledge

The grid-row-gap property



Do you find this helpful?

Related articles