The column-gap property is used to specify the amount of space between adjacent columns in a multi-column layout. It specifies the space—or gap—between columns belonging to the same multi-column element.
Trivia & Notes
The height of the column gap is the same height as the height of the columns.
If there is a column rule between columns (which is a line drawn between the columns to set them apart visually), the rule is drawn in the middle of the gap, and it does not take up any space, which means that it will not add to the amount of space between columns specified using column-gap.
If the width and count of columns do not fit into the width of the element, the browser will make necessary adjustments and may reduce the column count to fit the specified column widths into the element. The column gap may also result in narrowing columns down, depending on the amount of space available.
Official Syntax
-
Syntax:
column-gap: <length> | normal
- Initial: normal
- Applies To: multi-column elements
- Animatable: yes, as a length
Values
- <length>
-
The space between adjacent columns in a multi-column element is set to the given value. See the
<length>entry for a list of possible vales. Negative values are not allowed. - normal
-
The default value. This value is user-agent specific. A value of
1emis suggested by the specification.
Examples
The following will create a three-column layout inside an element, and sets the space between them using the column-gap property.
.mag {
columns: 30% 3;
column-gap: 1.5em;
}
The following are all valid column-gap values:
column-gap: 3em;
column-gap: 20px;
column-gap: 10%;
column-gap: 2pt;
/* ... any length value is allowed as long as it's not negative ... */
Live Demo
In the following demo, the columns property is used to create a multi-column layout on an element. Change the value of the column-gap property to see how the space between the columns changes, and how the widths of the columns adjust.
Browser Support
CSS3 Multiple column layout
Method of flowing information in multiple columns
W3C Candidate Recommendation
Supported from the following versions:
Desktop
- 50
- 92
- 10
- 37
- 10
Mobile / Tablet
- 10
- 130
- all
- 130
- 130
