Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
CSS grid-template-rows property
The CSS grid-template-rows property defines the size and number of rows in a CSS Grid container. It allows you to specify explicit dimensions for each row track.
Syntax
selector {
grid-template-rows: value;
}
Possible Values
| Value | Description |
|---|---|
length |
Defines row height in px, em, rem, etc. |
% |
Defines row height as a percentage of the container |
fr |
Defines flexible row height using fractional units |
auto |
Row height adjusts to content |
min-content |
Row height based on minimum content size |
max-content |
Row height based on maximum content size |
Example 1: Fixed Row Heights
The following example creates a grid with two rows of specific heights −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-template-rows: 80px 150px;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
background-color: #f0f0f0;
padding: 20px;
}
.container > div {
background-color: #4CAF50;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
<div>Item 6</div>
</div>
</body>
</html>
A grid with 6 green items arranged in 2 rows and 3 columns. The first row is 80px tall, the second row is 150px tall.
Example 2: Using Fractional Units
This example uses fractional units (fr) to create flexible row sizes −
<!DOCTYPE html>
<html>
<head>
<style>
.flexible-container {
display: grid;
grid-template-rows: 1fr 2fr 1fr;
grid-template-columns: repeat(2, 1fr);
height: 400px;
gap: 15px;
background-color: #e8f4fd;
padding: 20px;
}
.flexible-container > div {
background-color: #2196F3;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
border-radius: 8px;
}
</style>
</head>
<body>
<div class="flexible-container">
<div>Row 1</div>
<div>Row 1</div>
<div>Row 2 (Larger)</div>
<div>Row 2 (Larger)</div>
<div>Row 3</div>
<div>Row 3</div>
</div>
</body>
</html>
A grid with 6 blue items in 3 rows and 2 columns. The middle row takes twice the space of the first and third rows due to the 2fr value.
Conclusion
The grid-template-rows property provides precise control over row sizing in CSS Grid layouts. Use fixed units for consistent heights, fractional units for proportional sizing, or auto for content-based dimensions.
Updated on: 2026-03-15T13:04:32+05:30
94 Views
Advertisements