columngap

Columngap refers to the spacing between columns in a layout, and in standard CSS the official property is column-gap. It is a key part of the CSS Multi-column Layout Module and, in modern CSS, also relates to spacing between grid columns in CSS Grid. The term columngap is a common non-hyphenated variant or shorthand you might encounter, but the correct syntax uses the hyphenated column-gap.

The property defines the distance between adjacent columns. Its value can be a length (such as 20px, 1.5em, or 2rem) or a percentage, depending on the layout context. Column-gap works alongside other column-related properties such as column-count, column-width, and column-fill to control how content flows into multiple columns.

In practice, a typical use would specify the number of columns and the gap between them, for example: column-count: 3; column-gap: 24px;. In CSS Grid, column-gap also determines horizontal spacing between grid tracks, though the broader gap shorthand (gap) can cover both rows and columns.

Browser support for column-gap is strong in modern engines, including Chrome, Firefox, Edge, and Safari. Older browsers with limited support for CSS multi-column layouts may ignore column-gap, resulting in a single-column flow or default spacing.

See also: column-count, column-width, column-fill, and the general gap property used in CSS Grid and Flexbox layouts.