Skip to content
Related Articles

Related Articles

CSS | grid-auto-rows Property

View Discussion
Improve Article
Save Article
  • Last Updated : 29 Jun, 2022

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: 

HTML




<!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>

Output:

 

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

Example: 

HTML




<!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>

Output:

 

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

Example: 

HTML




<!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>

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: 

HTML




<!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>

Output:

 

  • initial: Initializes the value with its default value. 

Example: 

HTML




<!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>

Output:

 

  • inherit: Inherits the value from its parent element. 

Example: 

HTML




                        <!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>                   

Output:

 

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

  • Chrome 57.0
  • Edge 16.0
  • Firefox 70.0
  • Internet Explorer 10.0
  • Safari 10.1
  • Opera 44.0

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!