1. css
  2. /properties
  3. /column-gap

column-gap (grid-column-gap)

Definition

The column-gap CSS property sets the size of the gap between columns in a multi-column layout.

Examples

Specifies a gap size of 10 pixels between columns. This value can be any CSS length unit (e.g. px, em, rem):

column-gap: 10px;

Specifies a gap size of 1.5 times the current font size:

column-gap: 1.5em;

Specifies a gap size equal to the default font size. This value is a common starting point, but the actual size may vary depending on the font family and size used:

column-gap: normal;

Values

ValueDescription
lengthSpecifies the gap size in any CSS length unit (e.g. px, em, rem).
normalSpecifies a normal gap size, which is typically the default font size.

Best Practices

  • Choose a column-gap size that enhances the readability of the content and fits the overall design of the layout.
  • Use normal as a starting point, and adjust the gap size based on the layout and font size.
  • Consider using media queries to adjust the column-gap size based on the screen size.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes