column-gap
The column-gap CSS property sets the size of the gap (gutter) between an element’s columns.
Try it
Initially a part of Multi-column Layout, the definition of column-gap has been broadened to include multiple layout methods. Now specified in Box Alignment, it may be used in Multi-column, Flexible Box, and Grid layouts.
Note that grid-column-gap is an alias for this property.
Syntax
/* Keyword value */ column-gap: normal; /* values */ column-gap: 3px; column-gap: 2.5em; /* value */ column-gap: 3%; /* Global values */ column-gap: inherit; column-gap: initial; column-gap: revert; column-gap: revert-layer; column-gap: unset;
The column-gap property is specified as one of the values listed below.
Values
The browser’s default spacing is used between columns. For multi-column layout this is specified as 1em . For all other layout types it is 0.
The size of the gap between columns, defined as a . The property’s value must be non-negative.
The size of the gap between columns, defined as a . The property’s value must be non-negative.
Formal definition
| Initial value | normal |
|---|---|
| Applies to | multi-column elements, flex containers, grid containers |
| Inherited | no |
| Percentages | refer to corresponding dimension of the content area |
| Computed value | as specified, with s made absolute, and normal computing to zero except on multi-column elements |
| Animation type | a length, percentage or calc(); |