Open In App

CSS grid-template-rows Property

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

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 the grid-template-row property. It creates rows when needed.
  • auto: It is used to set the size of a row automatically i.e it depends on the size of the container & contents in the row.
  • max-content: It represents the maximum content of the items present in the grid.
  • min-content: It represents the minimal content of the items present in the grid.
  • length: The size of the row is set according to the specified length. 

Example 1:

html




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

html




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

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


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