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
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
01 Aug, 2023
Like Article
Save Article