CSS column-gap Property

Posted in CSS Tutorial

Updated on Oct 02, 2024

By Mari Selvan

👁️ 25 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The column-gap property in CSS is used to set the width of the gap (space) between columns in a multi-column layout.

This property helps in creating visually appealing layouts by controlling the space between columns, ensuring that the content is easily readable and well-organized.

💡 Syntax

The syntax for the column-gap property is simple and can be applied to any element using a multi-column layout.

Syntax

Copied

element {
  column-gap: value;
}

Here, value can be a length value (such as px, em, rem, etc.) or the keyword normal.

🎛️ Default Value

The default value of the column-gap property is normal, which means the browser determines the appropriate gap size.

🏠 Property Values

Value	Description
length	Specifies a fixed width for the gap between columns. For example, 20px, 1em, 2rem, etc.
normal	The browser's default spacing between columns.

📄 Example

In this example, we'll create a multi-column layout with a 20px gap between the columns.

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 column-gap Example</title>
  <style>
    .column-layout {
      column-count: 3;
      column-gap: 20px;
    }
  </style>
</head>
<body>
  <h1>Multi-Column Layout with Custom Column Gap</h1>
  <div class="column-layout">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</body>
</html>

🖥️ Browser Compatibility

The column-gap property is supported in most modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. However, it is always a good practice to test your website across different browsers to ensure compatibility.

🎉 Conclusion

The column-gap property is a useful tool for web developers looking to create clean and organized multi-column layouts.

By adjusting the gap between columns, you can improve the readability and visual appeal of your content. Experiment with different gap values to find the best layout for your website.