CSS column-gap property sets a gap between the columns of an element in a multi-column layout.
The column-gap can be specified in any valid CSS length format such as ‘px’, ’em’, ‘rem’, ‘cm’, etc. It can also be specified using percentage(%). Refer to the example below:
Example:
div{
column-count: 3;
column-gap: 30px;
}
CSS Syntax
The column-gap property has the following syntax:
column-gap: length|normal|initial|inherit;
Property Values
The column-gap property accepts the following values:
| length | Specifies the gap between the columns in any valid CSS length format such as ‘px’, ’em’, ‘cm’, etc. It can also be specified in percentage(%). |
| normal | This is the default value. Sets a normal gap(1em) between the columns. |
| initial | Sets the column-gap property to its default value(normal). |
| inherit | Inherits the column-gap property from the parent element. |
General Info
| Default Value | normal |
| Inherited | No |
| JavaScript Usage | element.style.columnGap = “30px” |
