CSS column-count Property

The column-count property determines how many columns the user agent should create when an element is laid out as a multicol container. It is the primary mechanism for splitting block-level flow into multiple vertical tracks so text and other flow content can be presented in a newspaper- or magazine-style layout. Using this property tells the layout system to divide the available inline space into discrete columns and flow inline content down the first column, then into subsequent columns in normal reading order.

This property works in concert with other multicolumn controls: for example, column-width provides a sizing hint that the UA may use when deciding an appropriate column geometry, while the column-gap determines how much space is left between the columns and thus affects the usable width for each column. There is also a shorthand, columns, which combines count and width concerns; these properties together influence whether the engine produces the requested number of columns or adjusts them to fit available space.

How content is distributed among columns is influenced by balancing and fragmentation rules. The behavior of filling columns (whether the engine attempts to even out column heights or fills one before another) is governed by column-fill, and breaking rules inside blocks - such as avoiding breaks inside certain elements - are governed by properties like break-inside. Floats, positioned elements, and column-spanning elements can interact with the column flow in subtle ways (for example, some elements may span all columns or remain anchored within a single column), so designers often combine column settings with explicit break and span controls to achieve the desired visual grouping and reading order.

In responsive layouts, using column-count requires attention to the container’s available inline size: the same column count can produce very narrow columns on small viewports or very wide columns on large ones. Authors frequently combine media queries or pair column-width with the column count to create layouts that adapt gracefully, or they use the shorthand columns to express intent in a single declaration. Finally, because multi-column layout changes the visual flow but preserves DOM order, it generally maintains logical reading order for accessibility and assistive technologies even when text is visually arranged into multiple columns.