CSS column-gap Property

Example

Specify a 40 pixels gap between the columns:

div {
  column-gap: 40px;
}

Definition and Usage

The column-gap property specifies the gap between the columns.

Note: If there is a column-rule between columns, it will appear in the middle of the gap.

Default value:	normal
Inherited:	no
Animatable:	yes.
Version:	CSS Box Alignment Module Level 3
JavaScript syntax:	object.style.columnGap="50px"

• Inherited : "Inherited = no" means that it cannot takes (inherit) it's value from it's parent element.
• object - object in javascript means the element on which column-gap is applied.
• Animatable - "Animatable = yes" means that it can be animated with CSS @keyframes.

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
column-gap (in Multiple Columns)	50	10	52	10	37
column-gap (in Grid)	66	16	61	12	53
column-gap (in Flexbox)	84	84	63	14.1	70

CSS Syntax

column-gap: length|normal|initial|inherit;

Property Values

Value	Description	Demo
length	A specified length that will set the gap between the columns
normal	Default value. Specifies a normal gap between the columns. W3C suggests a value of 1em
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

More Examples

Example

Divide the text in a <div> element into three columns:

div {
  column-count: 3;
}

Example

Specify the width, style, and color of the rule between columns:

div {
  column-rule: 4px double #ff00ff;
}