Skip to content
Related Articles

Related Articles

CSS | grid-row-gap Property
  • Last Updated : 07 Jan, 2019

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:




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




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




    <!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 57.0
  • Internet Explorer 16.0
  • Firefox 52.0
  • Safari 10.0
  • Opera 44.0



My Personal Notes arrow_drop_up
Recommended Articles
Page :