CSS column-count and column-gap Explained

The CSS column-count and column-gap properties are fundamental parts of the CSS Multi-column Layout Module, designed to split text and block content into magazine- or newspaper-style vertical columns. This article explains how column-count determines the number of columns an element displays, how column-gap controls the spacing between those columns, and how to implement both properties in web design.

What Is column-count?

The column-count property specifies the maximum number of columns an element's content should be divided into. Rather than requiring developers to manually split text across multiple div elements, the browser automatically balances the content across the specified number of columns.

Syntax:

.container {
  column-count: 3;
}

Values for column-count:

  • <integer>: A positive whole number (such as 2, 3, or 4) specifying the target number of columns.
  • auto: The default value, which indicates that the number of columns should be determined by other properties, such as column-width.

When content exceeds the vertical height available, it flows seamlessly from the bottom of one column to the top of the next.

What Is column-gap?

The column-gap property sets the width of the empty space—often called the gutter—between adjacent columns. Without this property, columns would run directly into one another or rely on default browser spacing, which can make text difficult to read.

Syntax:

.container {
  column-gap: 30px;
}

Values for column-gap:

  • normal: The default value, which delegates the spacing to the browser (typically equivalent to 1em).
  • <length>: A specific unit of measurement, such as px, em, or rem.
  • <percentage>: A percentage value defining the gap relative to the total width of the multi-column element.

If you add a vertical line between columns using the column-rule property, that line is drawn within the space defined by column-gap, without adding extra width to the layout.

Practical Implementation

Combining column-count and column-gap creates an organized, readable block of content with minimal CSS:

.article-body {
  column-count: 3;
  column-gap: 2rem;
}

In this setup, the content inside .article-body is split evenly across three vertical columns with a 2rem space between each column. If the viewport narrows, developers typically use CSS media queries to lower the column-count to prevent columns from becoming too narrow on smaller screens.