CSS grid-row-gap Property

The grid-row-gap property in CSS is used to define the size of the gap between the grid elements. The user can specify the width of the gap separating the rows by providing a value to the grid-row-gap.

Syntax:

grid-row-gap: length | percentage | global-values;

Property Values:

length: The user can set the grid-row-gap value to be fixed length measured in px, cm etc.
global-value: This property is used to set the grid-row-gap value in the form of some fixed terms which includes inherit, initial.
percentage (%): This property is used to set grid-row-gap value in the form of percentage, where percentage values are relative to the dimension of the element.

Example: In this example, we are using the above-explained property.

html

<!DOCTYPE html>
<html>
   
<head>
    <title>
        CSS grid-row-gap Property
    </title>
 
    <style>
        .main {
            display: grid;
            grid-template-columns: auto auto auto;
            grid-row-gap: 20px;
            grid-column-gap: 20px;
            background-color: green;
            padding: 30px;
        }
 
        .main>div {
            background-color: white;
            text-align: center;
            padding: 15px;
            font-size: 25px;
        }
    </style>
</head>
 
<body>
    <div class="main">
        <div>G</div>
        <div>E</div>
        <div>E</div>
        <div>K</div>
        <div>S</div>
    </div>
</body>
   
</html>

Output:

Example:

html

<!DOCTYPE html>
<html>
   
<head>
    <title>
        CSS grid-row-gap Property
    </title>
 
    <style>
        .main {
            display: grid;
            grid-template-columns: auto auto auto;
            grid-row-gap: 20%;
            grid-column-gap: 2%;
            background-color: green;
            padding: 30px;
        }
 
        .main>div {
            background-color: white;
            text-align: center;
            padding: 15px;
            font-size: 25px;
        }
    </style>
</head>
 
<body>
    <div class="main">
        <div>G</div>
        <div>E</div>
        <div>E</div>
        <div>K</div>
        <div>S</div>
    </div>
</body>
   
</html>

Output:

Example:

html

<!DOCTYPE html>
<html>
   
<head>
    <title>
        CSS grid-row-gap Property
    </title>
 
    <style>
        .main {
            display: grid;
            grid-template-columns: auto auto auto;
            grid-row-gap: initial;
            grid-column-gap: 20px;
            background-color: green;
            padding: 30px;
        }
 
        .main>div {
            background-color: white;
            text-align: center;
            padding: 15px;
            font-size: 25px;
        }
    </style>
</head>
 
<body>
    <div class="main">
        <div>G</div>
        <div>E</div>
        <div>E</div>
        <div>K</div>
        <div>S</div>
    </div>
</body>
   
</html>