Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

CSS Properties

CSS gap Property

Posted in CSS Tutorial
Updated on Oct 03, 2024
By Mari Selvan
👁️ 10 - Views
⏳ 4 mins
💬 1 Comment
CSS gap Property

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.

Syntax
Copied
Copy To Clipboard
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

ValueDescription
lengthSpecifies the gap with a specific length (e.g., 10px, 1em, 2rem).
percentageSpecifies the gap as a percentage of the containing element's size (e.g., 5%).
normalThe 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.

index.html
Copied
Copy To Clipboard
<!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:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

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

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy