Column-Gap Property
Last updated: 2026-09-13
column-gap Column-Gap Property
The column-gap property sets the gap between columns in a multi-column layout. As a key part of CSS Multi-column Layout, a well-chosen gap noticeably improves the readability and appearance of multi-column text.
| Category | |
|---|---|
| Initial Value | normal |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
column-gap: normal | <length-percentage>;⚙️ Values
| Value | Type | Description |
|---|---|---|
normal | Keyword | The default column gap. |
<length> | Type | A fixed column gap. |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| column-gap | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Supported in all major browsers | |||||
Tip： normal usually equals 1em (based on the current font size) and is the default gap.
Warning： A gap that is too small makes adjacent columns hard to tell apart; one that is too large wastes space and interrupts the reading line. A value around 1.5em to 2em, or 24px to 40px, is generally recommended.
❓ FAQ
QWhat's the difference between column-gap and gap?
Acolumn-gap is the gap property specific to multi-column layout; gap is the general spacing property for Flexbox and Grid. In modern browsers they are part of the same spacing system: gap works in multi-column layouts too, equivalent to column-gap there, and it also covers row-gap and column-gap in flex and grid. In a multi-column layout, column-gap reads more clearly, while gap is the uniform choice across all three layout modes.
QCan column-gap use a percentage?
AYes. Per the CSS Multi-column spec, column-gap accepts normal or <length-percentage>, where a percentage is computed against the multi-column container's width; this is a newer feature, since earlier specs allowed only lengths. If you must support older browsers, stick with fixed units like px or em, because percentages may degrade on some legacy engines. When in doubt, use a length for maximum compatibility.
QWhat is the default value of column-gap?
AThe default is normal, which browsers typically render as 1em based on the current font size, meaning the gap scales with the font. If you want a fixed, predictable gap, set an explicit length such as column-gap:32px. Browsers mostly agree that normal means 1em, but the rendered result still depends on the font in use, so the effective spacing changes when the font size changes.
QDoes column-gap take space away from the columns?
ANo. The gap is space reserved between columns: when distributing widths, the browser first subtracts the sum of all column-gaps, then splits the remaining width among the columns. So a larger column-gap makes each column narrower; keep the ratio between gap and column width reasonable so the columns are not squeezed too thin for comfortable reading, especially on narrow viewports where every pixel counts.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
columns (Multi-column Shorthand)
Configure a multi-column layout overall.
column-rule
Add a rule in the gap between columns.
