![CSS Selectors](https://codetofun.com/wp-content/themes/codetofun/images/large/css-selectors.webp)
CSS Properties
CSS gap Property
![CSS gap Property](https://codetofun.com/wp-content/themes/codetofun/images/large/css-gap.webp)
Photo Credit to CodeToFun
🙋 Introduction
The gap
property in CSS is a shorthand for setting the row-gap and column-gap properties in grid and flexbox layouts.
It defines the space between rows and columns, making it easier to control the layout of your content with consistent spacing.
💡 Syntax
The syntax for the gap
property allows you to specify the space for rows and columns in a grid or flex container.
container {
gap: row-gap column-gap;
}
- row-gap is the space between rows.
- column-gap is the space between columns.
If only one value is provided, it applies to both rows and columns.
🎛️ Default Value
The default value of the gap
property is normal, which typically results in no space between rows and columns unless otherwise defined by the browser's default styles.
🏠 Property Values
Value | Description |
---|---|
length | Specifies the gap with a specific length (e.g., 10px, 1em, 2rem). |
percentage | Specifies the gap as a percentage of the containing element's size (e.g., 5%). |
normal | The default value which usually means no gap unless specified by browser defaults. |
📄 Example
In this example, we'll use the gap
property to create space between items in a grid container.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS gap Example</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.grid-item {
background-color: lightblue;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h1>Grid Container with Gap</h1>
<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>
🖥️ Browser Compatibility
The gap
property is widely supported in modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. It is always good practice to test your layout across different browsers to ensure consistent rendering.
🎉 Conclusion
The gap
property is an essential tool for web developers working with grid and flexbox layouts.
By using gap
, you can easily control the spacing between rows and columns, creating a clean and well-organized design. Experiment with different values to see how this property can improve the layout of your web projects.
👨💻 Join our Community:
Author
![author](https://codetofun.com/wp-content/themes/codetofun/images/mari-selvan-400.webp)
For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.
Buy me a coffee to make codetofun.com free for everyone.
Buy me a Coffee
If you have any doubts regarding this article (CSS gap Property), please comment here. I will help you immediately.