Skip to content
Related Articles

Related Articles

CSS | grid-row-start Property
  • Last Updated : 31 Oct, 2019

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;

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 it can’t be observed.

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



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
    <head
        <title
            CSS grid container 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>                 

chevron_right


Output:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
    <head
        <title
            CSS grid container 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>            

chevron_right


Output:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
    <head
        <title
            CSS grid container 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>            

chevron_right


Output:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
    <head
        <title
            CSS grid container 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>            

chevron_right


Output:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
    <head
        <title
            CSS grid container 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>            

chevron_right


Output:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
    <head
        <title
            CSS grid container 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>            

chevron_right


Output:

Supported Browsers: The browser supported by grid-row-end 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 :