Open In App

CSS grid-row-start Property

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

The grid-row-start property in CSS is used to define the grid items’ start position within the grid row by specifying the inline start edge of its grid area.

Syntax:  

grid-row-start: auto|span|row-line|initial|inherit;

Default value: auto 

Property Values:  

  • auto: It sets the grid-row-start property to its default value of one row.
  • span: It specifies the number of rows the item will span.
  • integer(row-line): It specifies the row on which the item starts.
  • initial: It sets the grid-row-start property to its default value.
  • inherit: The grid-row-start property is inherited from its parent.

Note: Don’t initialize the height and width of the items of the container explicitly. If initialized, the span effect can’t be observed.

Example 1: This example describes the container items without the grid-row-start property. 

HTML




<!DOCTYPE html>
<html>
   
<head>
    <title>
        CSS grid-row-start Property
    </title>
 
    <style>
        .main {
            display: grid;
            grid-template-columns: auto auto auto;
            grid-gap: 20px;
            padding: 30px;
            background-color: green;
 
        }
 
        .GFG {
            text-align: center;
            font-size: 35px;
            background-color: white;
            padding: 20px 0;
        }
    </style>
</head>
 
<body>
    <div class="main">
        <div class="GFG">1</div>
        <div class="GFG">2</div>
        <div class="GFG">3</div>
        <div class="GFG">4</div>
        <div class="GFG">5</div>
    </div>
</body>
   
</html>


Output: 

Example 2: This example describes the grid-row-start property to auto. 

html




<!DOCTYPE html>
<html>
   
<head>
    <title>
        CSS grid-row-start Property
    </title>
 
    <style>
        .main {
            display: grid;
            grid-template-columns: auto auto auto;
            grid-gap: 20px;
            padding: 30px;
            background-color: green;
 
        }
 
        .GFG {
            text-align: center;
            font-size: 35px;
            background-color: white;
            padding: 20px 0;
        }
 
        .Geeks3 {
            grid-row-start: auto;
        }
    </style>
</head>
 
<body>
    <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>
</body>
   
</html>


Output: 

Example 3: This example describes the grid-row-start property to span. 

html




<!DOCTYPE html>
<html>
   
<head>
    <title>
        CSS grid-row-start Property
    </title>
 
    <style>
        .main {
            display: grid;
            grid-template-columns: auto auto auto;
            grid-gap: 20px;
            padding: 30px;
            background-color: green;
 
        }
 
        .GFG {
            text-align: center;
            font-size: 35px;
            background-color: white;
            padding: 20px 0;
        }
 
        .Geeks3 {
            grid-row-start: span 2;
        }
    </style>
</head>
 
<body>
    <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>
</body>
   
</html>


Output: 

Example 4: This example describes the grid-row-start property to the row line. 

html




<!DOCTYPE html>
<html>
   
<head>
    <title>
        CSS grid-row-start Property
    </title>
 
    <style>
        .main {
            display: grid;
            grid-template-columns: auto auto auto;
            grid-gap: 20px;
            padding: 30px;
            background-color: green;
 
        }
 
        .GFG {
            text-align: center;
            font-size: 35px;
            background-color: white;
            padding: 20px 0;
        }
 
        .Geeks3 {
            grid-row-start: 2;
        }
    </style>
</head>
 
<body>
    <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>
</body>
   
</html>


Output:  

Example 5: This example describes the grid-row-start property to initial. 

html




<!DOCTYPE html>
<html>
   
<head>
    <title>
        CSS grid-row-start Property
    </title>
 
    <style>
        .main {
            display: grid;
            grid-template-columns: auto auto auto;
            grid-gap: 20px;
            padding: 30px;
            background-color: green;
 
        }
 
        .GFG {
            text-align: center;
            font-size: 35px;
            background-color: white;
            padding: 20px 0;
        }
 
        .Geeks3 {
            grid-row-start: initial;
        }
    </style>
</head>
 
<body>
    <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>
</body>
   
</html>


Output: 

Example 6: This example describes the grid-row-start property to inherit. 

html




<!DOCTYPE html>
<html>
   
<head>
    <title>
        CSS grid-row-start Property
    </title>
 
    <style>
        .main {
            display: grid;
            grid-template-columns: auto auto auto;
            grid-gap: 20px;
            padding: 30px;
            background-color: green;
 
        }
 
        .GFG {
            text-align: center;
            font-size: 35px;
            background-color: white;
            padding: 20px 0;
        }
 
        .Geeks3 {
            grid-row-start: inherit;
        }
    </style>
</head>
 
<body>
    <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>
</body>
   
</html>


Output: 

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

  • Google Chrome 57.0
  • Edge 16.0
  • Firefox 52.0
  • Safari 10.1
  • Opera 44.0


Last Updated : 03 Aug, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads