CSS | grid-auto-rows Property

The grid-auto-rows property in CSS is used to specify the size for the rows of implicitly generated grid containers.

Syntax:

grid-auto-rows: auto|max-content|min-content|length|percentage|minmax(min, max)|initial|inherit;

Property Values:

  • auto: This is the default value. The size is determined implicitly according to the size of the container.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html> 
    <html
        <head
            <title
                CSS grid-auto-rows Property 
            </title
                
            <style
                .main { 
                    display: grid; 
                    grid-template-areas: "a a"; 
                    grid-gap: 20px; 
                    padding: 30px; 
                    background-color: green;
                    grid-auto-rows:  auto;
                    
                
                .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:

  • length: It is used to set grid-auto-rows property to given length. The length value can not be negative.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html> 
    <html
        <head
            <title
                CSS grid-auto-rows Property 
            </title
                
            <style
                .main { 
                    display: grid; 
                    grid-template-areas: "a a"; 
                    grid-gap: 20px; 
                    padding: 30px; 
                    background-color: green;
                    grid-auto-rows: 3.5cm;
                    
                
                .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:

  • percentage: It sets the grid-auto-rows property to percentage value.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html> 
    <html
        <head
            <title
                CSS grid-auto-rows Property 
            </title
                
            <style
                .main { 
                    display: grid; 
                    grid-template-areas: "a a"; 
                    grid-gap: 20px; 
                    padding: 30px; 
                    background-color: green;
                    grid-auto-rows:  30%;
                    
                
                .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:

  • max-content: Specifies the size depending on the largest item in the container.
  • min-content: Specifies the size depending on the smallest item in the container.
  • minmax(min, max): Specifies the size in the range of [min, max]. greater than or equal to min and less than or equal to max.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html> 
    <html
        <head
            <title
                CSS grid-auto-rows Property 
            </title
                
            <style
                .main { 
                    display: grid; 
                    grid-template-areas: "a a"; 
                    grid-gap: 20px; 
                    padding: 30px; 
                    background-color: green;
                    grid-auto-rows:  minmax(100px, 3.5cm);
                    
                
                .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:

  • initial: Initializes the value with its default value.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html> 
    <html
        <head
            <title
                CSS grid-auto-rows Property 
            </title
                
            <style
                .main { 
                    display: grid; 
                    grid-template-areas: "a a"; 
                    grid-gap: 20px; 
                    padding: 30px; 
                    background-color: green;
                    grid-auto-rows: initial;
                    
                
                .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:

  • inherit: Inherits the value from its parent element.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

                            <!DOCTYPE html> 
    <html
        <head
            <title
                CSS grid-auto-rows Property 
            </title
              
            <style
                .container {
                    grid-auto-rows: 80px;
                }
                .main { 
                    display: grid; 
                    grid-template-areas: "a a"; 
                    grid-gap: 20px; 
                    padding: 30px; 
                    background-color: green;
                    grid-auto-rows: inherit;
                
                .GFG { 
                    text-align: center; 
                    font-size: 35px; 
                    background-color: white; 
                    padding: 20px 0; 
                
            </style
        </head
          
        <body
            <div class = "container">
                <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
            </div
        </body
    </html>                    

    chevron_right

    
    

    Output:

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

  • Chrome 57.0
  • Edge 16.0
  • Firefox 52.0
  • Safari 10.0
  • Opera 44.0


My Personal Notes arrow_drop_up


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.