CSS column-gap Property

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:

lengthSpecifies the gap between the columns in any valid CSS length format such as ‘px’, ’em’, ‘cm’, etc. It can also be specified in percentage(%).
normalThis is the default value. Sets a normal gap(1em) between the columns.
initialSets the column-gap property to its default value(normal).
inheritInherits the column-gap property from the parent element.

General Info

Default Valuenormal
InheritedNo
JavaScript Usageelement.style.columnGap = “30px”

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

Leave a Comment