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 Rows
CSS Grid rows refer to the horizontal tracks in a CSS grid container. They define the horizontal space where grid items are placed and can be explicitly defined using the grid-template-rows property.
Syntax
.grid-container {
display: grid;
grid-template-rows: value value value;
}
Example: Fixed Row Heights
The following example creates a grid with three rows of specific heights −
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px 150px 80px;
gap: 10px;
background-color: #f0f0f0;
padding: 20px;
}
.grid-item {
background-color: #3498db;
color: white;
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
<div class="grid-item">Item 5</div>
<div class="grid-item">Item 6</div>
<div class="grid-item">Item 7</div>
<div class="grid-item">Item 8</div>
<div class="grid-item">Item 9</div>
</div>
</body>
</html>
A grid with 3 columns and 3 rows appears. The first row is 100px tall, the second row is 150px tall, and the third row is 80px tall. Each row contains three blue boxes with white text.
Example: Flexible Row Heights
You can use fractional units (fr) to create flexible row heights −
<!DOCTYPE html>
<html>
<head>
<style>
.flexible-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr 2fr 1fr;
height: 400px;
gap: 10px;
background-color: #ecf0f1;
padding: 20px;
}
.flex-item {
background-color: #e74c3c;
color: white;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="flexible-grid">
<div class="flex-item">1fr</div>
<div class="flex-item">1fr</div>
<div class="flex-item">2fr</div>
<div class="flex-item">2fr</div>
<div class="flex-item">1fr</div>
<div class="flex-item">1fr</div>
</div>
</body>
</html>
A grid with 2 columns and 3 rows appears. The first and third rows take equal space (1fr each), while the middle row takes twice as much space (2fr), creating a proportional layout with red boxes.
Conclusion
CSS Grid rows provide powerful control over vertical layout. Use fixed values for precise heights or fractional units for flexible, responsive designs that adapt to available space.
Updated on: 2026-03-15T13:01:22+05:30
156 Views
Advertisements