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
Usage of CSS grid-row-end property
The CSS grid-row-end property defines where a grid item should end within the CSS Grid layout. It specifies the end position of a grid item by referencing specific grid lines or spanning a certain number of rows.
Syntax
selector {
grid-row-end: value;
}
Possible Values
| Value | Description |
|---|---|
auto |
Default value. The item spans one row |
line-number |
Specifies which row line to end at |
span n |
Specifies how many rows the item should span |
Example: Using span with grid-row-end
The following example demonstrates how grid-row-end: span 2 makes an item span across 2 rows −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 50px;
gap: 10px;
background-color: #f0f0f0;
padding: 15px;
width: 300px;
}
.container > div {
background-color: #4CAF50;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: bold;
}
.item3 {
grid-row-end: span 2;
background-color: #FF5722;
}
</style>
</head>
<body>
<div class="container">
<div>1</div>
<div>2</div>
<div class="item3">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
A grid layout with 6 items appears. Item 3 (orange) spans vertically across 2 rows while the other items (green) occupy single cells. The grid automatically adjusts the placement of subsequent items.
Example: Using line numbers
You can also specify exact row line numbers to control where items end −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, 60px);
gap: 10px;
background-color: #e3f2fd;
padding: 15px;
width: 250px;
}
.container > div {
background-color: #2196F3;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: bold;
}
.special-item {
grid-row-start: 1;
grid-row-end: 3;
background-color: #9C27B0;
}
</style>
</head>
<body>
<div class="container">
<div class="special-item">Spans to line 3</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
</body>
</html>
A 2x3 grid where the first item (purple) spans from row line 1 to row line 3, occupying the entire left column. The remaining items (blue) fill the right column.
Conclusion
The grid-row-end property provides precise control over grid item placement by defining where items should end vertically. Use span for relative positioning or line numbers for absolute positioning within your grid layout.
Updated on: 2026-03-15T13:15:59+05:30
70 Views
Advertisements