columnCount

Column-count is a CSS property in the CSS Multi-column Layout Module that specifies the number of columns into which the content of an element should be laid out. When applied to a container, it causes the content to flow into multiple columns, typically filling each column from top to bottom before starting a new one.

Syntax and values: column-count accepts a positive integer or auto. A common usage is column-count: 3; which creates three columns. The initial value is auto, meaning the browser may choose the number of columns based on available space and other layout factors. In practice, the actual width of each column depends on the container width, the column-gap setting, and related properties.

Layout behavior: content flows vertically within each column and then continues into the next column from left to right. If the container has a defined height, the browser may balance or fill columns according to the column-fill property (such as auto or balance). The column-count property can be used in combination with column-width, column-gap, and column-rule to control the overall appearance of the multi-column layout.

Related properties and considerations: column-gap sets the space between columns; column-rule draws a vertical line between columns if desired; column-fill affects how content fills columns when a height is specified; and column-span allows an element to span across columns in certain contexts. If CSS multi-column is not supported, content may render in a single column as a fallback.

Usage and compatibility: column-count is widely supported in modern browsers and is commonly used for newspaper-style or article layouts. It provides a straightforward way to introduce multi-column text without additional markup.