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-row Property
The CSS grid-row property controls the size and position of grid items along the row axis. It is a shorthand property that combines grid-row-start and grid-row-end to define which grid lines a grid item should span across rows.
Syntax
selector {
grid-row: start-line / end-line;
}
Possible Values
| Value | Description |
|---|---|
auto |
Default value, the item spans one row |
line-number |
Specifies which line to start/end at (e.g., 1, 2, 3) |
span n |
Spans across n number of rows |
start / end |
Defines both start and end positions |
Example: Spanning Multiple Rows
The following example demonstrates how to make a grid item span from row line 1 to row line 4 −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
background-color: #2196F3;
grid-template-columns: auto auto auto;
grid-template-rows: repeat(4, 60px);
padding: 20px;
gap: 10px;
}
.container > div {
background-color: #fff;
text-align: center;
padding: 20px;
font-size: 18px;
border: 2px solid #333;
}
.item1 {
grid-row: 1 / 4;
background-color: #ff9800;
}
</style>
</head>
<body>
<div class="container">
<div class="item1">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 layout with Item 1 spanning three rows (from row line 1 to 4), displayed in orange, while other items fill the remaining grid cells in white with black borders.
Example: Using Span Keyword
You can also use the span keyword to define how many rows an item should span −
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: repeat(3, 80px);
gap: 15px;
padding: 20px;
background-color: #f0f0f0;
}
.grid-item {
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
font-size: 16px;
}
.span-item {
grid-row: span 2;
background-color: #e91e63;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Item A</div>
<div class="grid-item span-item">Spans 2 Rows</div>
<div class="grid-item">Item C</div>
<div class="grid-item">Item D</div>
<div class="grid-item">Item E</div>
</div>
</body>
</html>
A 3x3 grid where the second item (pink) spans 2 rows vertically, while other items (green) occupy single cells.
Conclusion
The grid-row property provides flexible control over grid item positioning and sizing along the row axis. Use specific line numbers or the span keyword to create complex grid layouts efficiently.
Updated on: 2026-03-15T13:14:42+05:30
124 Views
Advertisements