Skip to content
Related Articles

Related Articles

CSS | grid-row-gap Property

View Discussion
Improve Article
Save Article
  • Last Updated : 02 Aug, 2022

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 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. 

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: 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:

 

  • 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: 

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:

 

  • global-value: This property is used to set the grid-row-gap value in the form of some fixed terms which includes inherit, initial. 

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>                   

Output:

 

Supported Browsers: The browser supported by CSS grid-row-gap Property are listed below:

  • Google Chrome 47.0 and above
  • Edge 16.0 and above
  • Firefox 52.0 and above
  • Safari 10.1 and above
  • Opera 34.0 and above
  • Internet Explorer not supported

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!