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
How to specify the size of the gap between rows in CSS Grid
Use the grid-row-gap property to set the size of the gap between rows in CSS Grid. This property controls the vertical spacing between grid items, making your layouts more visually appealing and well-structured.
Syntax
selector {
grid-row-gap: value;
}
Possible Values
| Value | Description |
|---|---|
length |
Defines the gap size in px, em, rem, etc. |
% |
Defines the gap as a percentage of the container |
normal |
Default value, typically 0 |
Example
The following example demonstrates a CSS Grid layout with a 50px gap between rows −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-row-gap: 50px;
grid-column-gap: 30px;
background-color: #95A5A6;
padding: 20px;
}
.container > div {
background-color: #F0F3F4;
text-align: center;
padding: 20px;
font-size: 20px;
border-radius: 5px;
}
.ele3 {
grid-column: span 2;
}
</style>
</head>
<body>
<div class="container">
<div class="ele1">1</div>
<div class="ele2">2</div>
<div class="ele3">3</div>
<div class="ele4">4</div>
<div class="ele5">5</div>
<div class="ele6">6</div>
</div>
</body>
</html>
A grid layout with numbered boxes (1-6) appears. Box 3 spans two columns, and there is a visible 50px vertical gap between rows, creating clear separation between the grid items.
Modern Alternative
Note that grid-row-gap is now considered legacy. The modern approach uses the shorthand gap property −
.container {
gap: 50px 30px; /* row-gap column-gap */
}
Conclusion
The grid-row-gap property provides precise control over vertical spacing in CSS Grid layouts. For modern projects, consider using the gap shorthand property instead.
Updated on: 2026-03-15T13:17:20+05:30
372 Views
Advertisements