Skip to content
Related Articles

Related Articles

CSS | grid-template-rows Property
  • Last Updated : 08 Aug, 2019

The grid-template-rows property in CSS is used to set the number of rows and height of the rows in a grid. The values of grid-template-rows are space-separated, where each value represents the height of the row.

Syntax:

grid-template-rows: none|auto|max-content|min-content|length|
initial|inherit;

Property Values:

  • none: It does not set the height of grid-template-row property. It creates row when needed.
    Syntax:

    grid-template-rows: none;
  • auto: It is used to set the size of row automatically i.e it depends on the size of container & contents in row.
    Syntax:



    grid-template-rows: auto;
  • max-content: It represents the maximum content of the items present in the grid.
    grid-template-rows: max-content;
  • min-content: It represents minimal content of the items present in the grid.
    grid-template-rows: min-content;
  • length: The size of row is set according to the specified length.
    grid-template-rows: length;
  • Example 1:




    <!DOCTYPE html> 
    <html
        <head
            <title
                CSS grid-template-rows Property 
            </title
              
            <style
                .geeks { 
                    background-color:green; 
                    padding:30px; 
                    display: grid; 
                    grid-template-columns: auto auto auto auto;
                    grid-template-rows: auto auto;
                    grid-gap: 10px; 
                
                .GFG { 
                    background-color: white; 
                    border: 1px solid white; 
                    font-size: 30px; 
                    text-align: center; 
                
            </style
        </head
          
        <body
            <div class="geeks"
                <div class="GFG">A</div
                <div class="GFG">B</div
                <div class="GFG">C</div
                <div class="GFG">D</div
                <div class="GFG">E</div
                <div class="GFG">F</div
                <div class="GFG">G</div
                <div class="GFG">H</div
            </div
        </body
    </html>                     

    
    

    Output:

    Example 2:




    <!DOCTYPE html> 
    <html
        <head
            <title
                CSS grid-template-rows Property 
            </title
              
            <style
                .geeks { 
                    background-color:green; 
                    padding:30px; 
                    display: grid; 
                    grid-template-columns: auto auto auto auto;
                    grid-template-rows: auto 150px ;
                    grid-gap: 10px; 
                
                .GFG { 
                    background-color: white; 
                    border: 1px solid white; 
                    font-size: 30px; 
                    text-align: center; 
                
            </style
        </head
          
        <body
            <div class="geeks"
                <div class="GFG">A</div
                <div class="GFG">B</div
                <div class="GFG">C</div
                <div class="GFG">D</div
                <div class="GFG">E</div
                <div class="GFG">F</div
                <div class="GFG">G</div
                <div class="GFG">H</div
            </div
        </body
    </html>                     

    
    

    Output:

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