CSS row-gap (Add Space between Rows)

The CSS row-gap (formerly known as grid-row-gap) is used to create or define the gap between rows in grid layout. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div.xyz {display: grid; grid-template-columns: auto auto; row-gap: 20px;}
      div.xyz > div {border: 2px solid firebrick; padding: 10px;}
   </style>
</head>
<body>

   <div class="xyz">
      <div>This is France</div>
      <div>This is Canada</div>
      <div>This is United States</div>
      <div>This is Argentina</div>
      <div>This is Germany</div>
      <div>This is Italy</div>
   </div>
   
</body>
</html>

Output

This is France

This is Canada

This is United States

This is Argentina

This is Germany

This is Italy

Notice the gap of 20px between rows, but no gap between columns.

Note - The grid as the value of display property, is used to make an element as a block level grid container.

Note - The grid-template-columns is used to define the number of columns to create in grid layout.

Note - The row-gap property can also be used with flex to create the gap between rows in flex layout. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div.xyz {display: flex; flex-wrap: wrap; width: 400px; row-gap: 20px;}
      div.xyz > div {border: 2px solid firebrick; padding: 10px;}
   </style>
</head>
<body>

   <div class="xyz">
      <div>This is France</div>
      <div>This is Canada</div>
      <div>This is United States</div>
      <div>This is Argentina</div>
      <div>This is Germany</div>
      <div>This is Italy</div>
   </div>
   
</body>
</html>

Output

This is France

This is Canada

This is United States

This is Argentina

This is Germany

This is Italy

CSS row-gap Syntax

The syntax of row-gap property in CSS, is:

row-gap: x;

The value of x should be any of the following:

length - specify the gap using length. For example: 10px
normal - used to define the normal gap. This is the default value
initial - used to create the gap using the default value
inherit - used to create the gap using the value inherited by its parent element

CSS Online Test

« Previous Tutorial Next Tutorial »