CSS | grid-row Property

Last Updated : 07 Jun, 2022

The grid-row property in CSS is used to specify the size and location in a grid layout. It is the combination of grid-row-start and grid-row-end property.

Syntax:

grid-row: grid-row-start|grid-row-end;

Property Values:

grid-row-start: It is used to specify the row on which to start displaying the item.

Example:

html

<!DOCTYPE html>
<html>
    <head>
        <style>
            .main {
                display: grid;
                grid-template-columns: auto auto auto auto;
                grid-gap: 10px;
                background-color: green;
                padding: 10px;
            }
             
            .GFG {
                background-color: rgba(255, 255, 255, 0.8);
                text-align: center;
                padding: 20px 0;
                font-size: 30px;
            }
             
            .Geeks1 {
                grid-row-start: 3;
            }
        </style>
    </head>
     
    <body>
     
        <h3>grid-row-start Property</h3>
     
        <div class="main">
            <div class="Geeks1 GFG">1</div>
            <div class="Geeks2 GFG">2</div>
            <div class="Geeks3 GFG">3</div>
            <div class="Geeks4 GFG">4</div>
            <div class="Geeks5 GFG">5</div>
            <div class="Geeks6 GFG">6</div>
            <div class="Geeks7 GFG">7</div>
            <div class="Geeks8 GFG">8</div>
        </div>
    </body>
</html>                   

Output:

grid-row-end It is used to specify the row-line on which to stop displaying the item or specify how many rows an item will span.

Example:

html

<!DOCTYPE html>
<html>
    <head>
        <style>
            .main {
                display: grid;
                grid-template-columns: auto auto auto auto;
                grid-gap: 10px;
                background-color: green;
                padding: 10px;
            }
             
            .GFG {
                background-color: rgba(255, 255, 255, 0.8);
                text-align: center;
                padding: 20px 0;
                font-size: 30px;
            }
             
            .Geeks1 {
                grid-row-end: span 3;
            }
        </style>
    </head>
     
    <body>
     
        <h3>grid-row-end Property</h3>
     
        <div class="main">
            <div class="Geeks1 GFG">1</div>
            <div class="Geeks2 GFG">2</div>
            <div class="Geeks3 GFG">3</div>
            <div class="Geeks4 GFG">4</div>
            <div class="Geeks5 GFG">5</div>
            <div class="Geeks6 GFG">6</div>
            <div class="Geeks7 GFG">7</div>
            <div class="Geeks8 GFG">8</div>
        </div>
    </body>
</html>                   

Output:

Supported Browsers: The browser supported by grid-row property are listed below:

Google Chrome 57.0 and above
Edge 16.0 and above
Firefox 52.0 and above
Safari 10.1 and above
Opera 44.0 and above
Internet Explorer not supported

My Personal Notes

Related Articles

CSS | grid-row Property

html

html

Start Your Coding Journey Now!