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 Gaps
The CSS Grid layout allows you to create gaps between rows and columns in a grid container. These gaps provide spacing between grid items, making your layout more visually appealing and easier to read.
Syntax
/* Individual gap properties */ row-gap: value; column-gap: value; /* Shorthand property */ gap: row-gap column-gap; gap: value; /* same gap for both rows and columns */
Example: Using Individual Gap Properties
The following example demonstrates setting row and column gaps separately −
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 100px);
row-gap: 20px;
column-gap: 30px;
background-color: #f0f0f0;
padding: 20px;
}
.grid-item {
background-color: #4CAF50;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>
</body>
</html>
A 3x2 grid with green numbered boxes (1-6) is displayed. There is 30px spacing between columns and 20px spacing between rows.
Example: Using Shorthand Gap Property
The shorthand gap property allows you to set both row and column gaps in one declaration −
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px 25px; /* row-gap column-gap */
background-color: #f9f9f9;
padding: 15px;
}
.grid-item {
background-color: #2196F3;
color: white;
padding: 20px;
text-align: center;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Item A</div>
<div class="grid-item">Item B</div>
<div class="grid-item">Item C</div>
<div class="grid-item">Item D</div>
<div class="grid-item">Item E</div>
<div class="grid-item">Item F</div>
</div>
</body>
</html>
A 4-column grid with blue rounded boxes labeled "Item A" through "Item F" is displayed. There is 25px spacing between columns and 15px spacing between rows.
Example: Uniform Gap
When you want the same gap for both rows and columns, use a single value −
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 120px);
grid-template-rows: repeat(3, 80px);
gap: 20px; /* uniform gap */
background-color: #e8e8e8;
padding: 20px;
justify-content: center;
}
.grid-item {
background-color: #FF5722;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
border-radius: 8px;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Box 1</div>
<div class="grid-item">Box 2</div>
<div class="grid-item">Box 3</div>
<div class="grid-item">Box 4</div>
<div class="grid-item">Box 5</div>
<div class="grid-item">Box 6</div>
</div>
</body>
</html>
A centered 3x3 grid with orange rounded boxes labeled "Box 1" through "Box 6" is displayed. There is uniform 20px spacing between all rows and columns.
Conclusion
CSS Grid gaps provide an elegant way to add spacing between grid items. Use row-gap and column-gap for individual control, or the shorthand gap property for convenience. This creates cleaner layouts without requiring margins on individual items.
Updated on: 2026-03-15T13:01:49+05:30
148 Views
Advertisements