Jobs Hub

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:

CSS Online Test

« Previous Tutorial Next Tutorial »