CSS Multi-column Layout

Basic

Multi-column layout flows normal content across columns

CSS Multi-column Layout takes normal-flow content and fragments it across a set of column boxes. Unlike Grid, the children remain in normal flow rather than becoming one grid item per cell. The columns are generated by the multi-column formatting model and adapt to the available inline space.

?

column-count requests a number of columns

`column-count` requests the number of columns in the multi-column container. The resulting column width still depends on the available space and other column sizing constraints. `auto` leaves the count to the multi-column layout algorithm.

?

column-width expresses a preferred column width

`column-width` expresses a preferred minimum column width. The layout can produce fewer or differently sized columns when the available inline space cannot satisfy the requested combination of count and width. This is why `column-count` and `column-width` are complementary controls rather than interchangeable commands.

?

The columns shorthand combines count and width

The `columns` shorthand combines `column-width` and `column-count`. For curriculum clarity, learn the longhands first: one controls the requested count and the other the preferred width. When both are specified, the multi-column algorithm uses both constraints together.

column-gap controls the space between columns

`column-gap` controls the inline space between adjacent column boxes. It is a column-layout use of the general gap concept; it does not create padding inside each column and it does not replace the column rule.

?

column-rule paints a separator without changing the gap

The `column-rule` shorthand controls the line painted between columns, with `column-rule-width`, `column-rule-style`, and `column-rule-color` as its components. The rule is a visual separator; it does not become part of the content flow or reduce the conceptual column gap.

column-fill controls distribution when the block size is constrained

`column-fill` controls how content is distributed among columns when the multi-column container has a constrained block size. `balance` asks the user agent to balance the content as far as the model permits; `auto` fills columns sequentially in the relevant constrained context.

The current Level 1 Editor’s Draft defines three `column-fill` values: `auto`, `balance`, and `balance-all`. `balance` balances each multi-column line except where the model limits balancing; `balance-all` asks for balancing across all fragments in a fragmented context. Treat these newer distinctions as status-sensitive because the live draft remains work in progress.

?

?

column-span can make an element cross the columns

`column-span: all` makes an in-flow element span across all columns of the nearest multi-column ancestor in the same block formatting context. It forces a column break around the spanning element so content before and after it forms separate multi-column lines. `column-span` is not Grid track spanning.

?

Fragmentation properties control where content may break

Multi-column layout is a fragmentation context, so the generic CSS Fragmentation properties can request or avoid breaks. For example, `break-before: column` requests a column break before an element. The Fragmentation lesson owns the general break model; this lesson explains only how those controls participate in multi-column layout.

?

break-inside can avoid splitting a box across columns

`break-inside` can request that an element not be fragmented across a column boundary. `break-inside: avoid` is a request, not a guarantee that can override every higher-priority constraint; the fragmentation algorithm may still need to break content when necessary.

?

Writing mode determines the physical direction of the column progression

Multi-column layout uses the writing-mode and text direction of the formatting context. Do not hard-code the idea that columns always run left-to-right: the logical inline and block axes determine how the column boxes are arranged and how content progresses.

?

Multi-column layout is different from Grid and Flexbox

Grid creates explicit two-dimensional tracks and places grid items into those tracks. Flexbox lays out flex items along a main axis with optional wrapping. Multi-column instead keeps normal-flow content and fragments it through column boxes. Choose the model based on whether you are laying out items as tracks or flowing text/content through columns.

?

Responsive multi-column layouts should start with the content and available space

A robust multi-column design can use `column-width` to express a readable preferred column width and let the available inline space determine how many columns fit. Use `column-count` when a requested count is itself part of the design. Always test narrow containers, long words, headings, images, and constrained block sizes because fragmentation changes how content is distributed.

?

Multi-column is a fragmentation context, not a replacement for the Fragmentation model

Column boxes are fragmentation containers. Generic fragmentation properties such as `break-before`, `break-after`, and `break-inside` therefore participate in multi-column layout, while the dedicated Fragmentation lesson owns the broader model across columns, pages, and other fragmentainers. This boundary prevents repeating the same break algorithm in two lessons.

Specification status: teach the mature Level 1 model, label developing work

CSS Multi-column Layout Level 1 has a published W3C Candidate Recommendation Snapshot dated 16 May 2024, while the current CSSWG Editor’s Draft is dated 4 August 2026. The current draft remains work in progress, so this lesson teaches the established Level 1 model and identifies the live draft as the current normative work-in-progress source. Multi-column Level 2 is also an Editor’s Draft and is not silently folded into this lesson.

Normative sources: W3C CSS Multi-column Layout Module Level 1 and the current CSSWG Editor’s Draft. The Fragmentation lesson remains the owner of the generic fragmentation model and break-selection details.

A practical multi-column debugging method

When a multi-column layout looks wrong, first identify whether you chose `column-count`, `column-width`, or both. Then inspect the available inline and block space, `column-gap`, and any constrained height. Next check spanning elements and fragmentation requests such as `break-inside`. Finally compare the result with the intended writing mode and verify that you are not actually trying to solve a Grid or Flexbox placement problem.

Quick review

You should now be able to explain the multi-column formatting model, choose between column count and preferred column width, control gaps and rules, understand spanning and fragmentation, distinguish multi-column from Grid and Flexbox, and recognize which behavior belongs to the broader Fragmentation module.