CSS Gap
CSS Gap
In CSS, the gap property is used to set the spacing between rows and columns in a grid layout. It can be applied to both grid and flex layouts, making page layouts more flexible and aesthetically pleasing. In this article, we’ll explain the usage of the gap property in detail and provide some sample code to help readers better understand it.
1. Using gap in Grid Layout>
In Grid Layout, the gap property can be used to set the spacing between rows and columns. Here is a simple example code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Layout with Gap</title>
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
.grid-item {
background-color: #f2f2f2;
padding: 20px;
text-align: center;
}
</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>
</body>
</html>
Output:
In the example above, we created a grid layout with 6 items, each with a 20px gap between them. By setting gap: 20px;, we can easily adjust the gap between items.
2. Using gap in Flex Layout
In addition to Grid layout, the gap property can also be applied to Flex layout. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Layout with Gap</title>
<style>
.flex-container {
display: flex;
gap: 20px;
}
.flex-item {
background-color: #f2f2f2;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
</body>
</html>
Output:
In the example above, we create a flex layout with three items, each with a 20px gap between them. By setting gap: 20px;, we can easily adjust the spacing between the items.
3. Use the gap Property to Create Responsive Layouts
The gap property can also be used to create responsive layouts, adjusting the spacing based on different screen sizes. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Layout with Gap</title>
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
.grid-item {
background-color: #f2f2f2;
padding: 20px;
text-align: center;
}
@media screen and (max-width: 768px) { .grid-container {
grid-template-columns: 1fr 1fr;
gap: 10px;
}
}
</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>
</body>
</html>
Output:
In the example above, we set a media query that changes the grid layout to two columns and reduces the gap to 10px when the screen width is less than 768px. This ensures a good layout on all devices.
4. Using the gap Property to Create Complex Layouts
The gap property can also be used to create complex layouts, such as multi-column or nested layouts. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Complex Layout with Gap</title>
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 20px;
}
.grid-item {
background-color: #f2f2f2;
padding: 20px;
text-align: center;
}
.nested-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.nested-item {
background-color: #f2f2f2;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Main Content</div>
<div class="grid-item">
<div class="nested-grid">
<div class="nested-item">Sub Item 1</div>
<div class="nested-item">Sub Item 2</div>
<div class="nested-item">Sub Item 3</div>
<div class="nested-item">Sub Item 4</div>
</div> </div>
</div>
</body>
</html>
Output:
In the example above, we create a two-column grid layout with a nested sub-grid layout containing four items within the second column. By setting different gap values, we can achieve different levels of spacing, making the layout more flexible and diverse.
5. Using the gap Property to Achieve Equal-Height Layouts
The gap property can also be used to achieve equal-height layouts, maintaining consistent spacing between items even with varying content heights. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Equal Height Layout with Gap</title>
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
.grid-item {
background-color: #f2f2f2;
padding: 20px;
text-align: center;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<button>Read More</button>
</div>
<div class="grid-item">
<div class="content">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</div>
<button>Read More</button>
</div>
<div class="grid-item">
<div class="content">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.</div>
<button>Read More</button>
</div>
</div>
</body>
</html>
Output:
In the example above, we use Flex layout and the gap property to achieve an equal height layout. Each item contains a content area and a button. Setting the flex: 1; property ensures consistent spacing between items, even if the content heights vary.
6. Using the gap Property to Implement Card Layout
The gap property can also be used to implement card layouts, creating a consistent spacing between cards for a more aesthetically pleasing look. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Card Layout with Gap</title>
<style>
.card-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}
.card {
background-color: #f2f2f2;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="card-container">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
<div class="card">Card 4</div>
<div class="card">Card 5</div>
</div>
</body>
</html>
Output:
In the example above, we use the Grid layout and the gap property to implement a card layout with a 20px gap between each card. By setting grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));, you can achieve an adaptive card layout, maintaining consistent card widths and automatically wrapping lines.
7. Use the gap Property to Implement Navigation Menu Layout
The gap property can also be used to implement navigation menu layout, providing spacing between menu items to improve the user experience. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navigation Menu with Gap</title>
<style>
.nav-menu {
display: flex;
gap: 20px;
}
.nav-item {
padding: 10px;
background-color: #f2f2f2;
text-align: center;
}
</style>
</head>
<body>
<div class="nav-menu">
<div class="nav-item">Home</div>
<div class="nav-item">About</div>
<div class="nav-item">Services</div>
<div class="nav-item">Contact</div>
</div>
</body>
</html>
Output:
In the example above, we use Flex layout and the gap property to create a navigation menu layout with 20px spacing between each menu item. By setting gap: 20px;, we can easily adjust the spacing between menu items, making the navigation menu look more neat and beautiful.
8. Use the gap Attribute to Create a Picture Wall Layout
The gap attribute can also be used to create a picture wall layout, creating a waterfall effect by spacing https://coder-cafe.com/wp-content/uploads/2025/09/images apart. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Gallery with Gap</title>
<style>
.image-gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}
.image {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="image-gallery">
<img src="https://www.geek-docs.com/https://coder-cafe.com/wp-content/uploads/2025/09/image1.jpg" alt="Image 1" class="image">
<img src="https://www.geek-docs.com/https://coder-cafe.com/wp-content/uploads/2025/09/image2.jpg" alt="Image 2" class="image">
<img src="https://www.geek-docs.com/https://coder-cafe.com/wp-content/uploads/2025/09/image3.jpg" alt="Image 3" class="image">
<img src="https://www.geek-docs.com/https://coder-cafe.com/wp-content/uploads/2025/09/image4.jpg" alt="Image 4" class="image">
<img src="https://www.geek-docs.com/https://coder-cafe.com/wp-content/uploads/2025/09/image5.jpg" alt="Image 5" class="image">
</div>
</body>
</html>
Output:
In the example above, we use Grid layout and the gap property to create a picture wall layout with a 20px gap between each image. By setting grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));, we can achieve an adaptive image layout, maintaining consistent image widths and automatically wrapping them.
9. Using the gap Property to Implement Responsive Navigation Bar Layouts
The gap property can also be used to implement a responsive navigation bar layout, adjusting the spacing between menu items based on different screen sizes. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navigation Menu with Gap</title>
<style>
.nav-menu {
display: flex;
justify-content: center;
}
.nav-item {
padding: 10px;
background-color: #f2f2f2;
text-align: center;
}
@media (max-width: 768px) {
.nav-menu {
flex-direction: column;
gap: 10px; }
}
</style>
</head>
<body>
<div class="nav-menu">
<div class="nav-item">Home</div>
<div class="nav-item">About</div>
<div class="nav-item">Services</div>
<div class="nav-item">Contact</div>
</div>
</body>
</html>
Output:
In the example above, we use Flex layout and media queries to implement a responsive navigation bar layout. When the screen width is less than 768px, the menu items will be arranged vertically with a 10px gap between them. By setting @media (max-width: 768px), you can adjust the spacing between menu items to suit different screen sizes and improve the user experience.