CSS gap Property

Posted in CSS Tutorial

Updated on Aug 04, 2024

By Mari Selvan

👁️ 8 - Views

⏳ 4 mins

💬 1 Comment

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

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.

index.html

Copied

<!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.