CSS
🎯 CSS column-gap Property
The column-gap CSS property defines the space between columns in a multi-column layout. It helps create clean, readable, and visually balanced layouts.
It is widely used in newspaper-style, magazine-style, and blog layouts to improve readability between text columns.
🔹 Why Use column-gap?
-
Benefits
- Improves readability between columns.
- Creates clean and modern multi-column layouts.
- Prevents columns from looking too crowded.
- Essential for magazine and article designs.
🧩 Basic Usage
The following example creates three columns with a 20px gap between them.
p {
column-count: 3;
column-gap: 20px;
}
🔹 column-gap Values
1️⃣ normal
Uses the browser’s default spacing between columns.
div {
column-gap: normal;
}
2️⃣ length
Defines a fixed space between columns using units like px, em, or rem.
div {
column-gap: 30px;
}
3️⃣ initial
Resets the property to its default browser value.
div {
column-gap: initial;
}
4️⃣ inherit
Inherits the column-gap value from the parent element.
div {
column-gap: inherit;
}
-
🧠 Summary
- column-gap defines the spacing between columns in multi-column layouts.
- It improves readability and visual balance.
- Commonly used in articles, blogs, and magazine-style layouts.
- Works together with column-count and column-width.