Created:2026/03/03
Updated:2026/03/04
Author:
Takeshi Takatsudo

Multi-Column Layout

The Problem

Creating newspaper-style multi-column text or masonry/Pinterest-style layouts has historically required JavaScript libraries or complex CSS Grid hacks. AI agents often reach for these heavier solutions without considering CSS Multi-Column Layout, a native CSS module that handles column-based content flow with just a few properties. Despite excellent browser support, multi-column layout remains widely underused — particularly for its ability to flow content vertically through columns without any JavaScript.

The Solution

CSS Multi-Column Layout splits content into multiple columns using the columns property system. Content flows top-to-bottom within each column, then continues at the top of the next column — exactly like a newspaper. This vertical flow is the key distinction from CSS Grid, which fills rows left-to-right.

The module works for both inline text content (articles, paragraphs) and block-level elements (cards, images), making it versatile for a range of layout patterns.

Core Principles

column-count vs column-width

The two fundamental approaches to defining columns:

/* Fixed number of columns */
.fixed-columns {
  column-count: 3;
}

/* Minimum column width — browser decides the count */
.flexible-columns {
  column-width: 250px;
}

/* Shorthand: column-width then column-count */
.shorthand {
  columns: 250px 3; /* At least 250px wide, at most 3 columns */
}

column-count creates exactly that many columns regardless of container width. column-width sets a minimum width — the browser calculates how many columns fit and may make them wider than the specified value, but never narrower. For responsive layouts, column-width alone is usually the better choice because it adapts to the viewport without media queries.

Gap and Rules

.styled-columns {
  column-count: 3;
  column-gap: 2rem;          /* Space between columns */
  column-rule: 1px solid hsl(0 0% 80%); /* Vertical divider */
}

column-gap controls the space between columns (defaults to 1em). column-rule draws a vertical line between columns, using the same syntax as border. The rule does not take up space — it is painted in the middle of the gap.

break-inside for Preventing Card Splits

When block-level elements (cards, figures, list items) are placed in a multi-column container, the browser may split them across column boundaries. Prevent this with:

.card {
  break-inside: avoid;
}

This is essential for masonry-style card layouts where each card should remain intact within a single column.

Code Examples

Magazine Text Layout

Classic newspaper-style multi-column text using column-count with column-gap and column-rule. Text flows naturally from one column to the next.

Magazine Text Layout with column-count

Width-Based Responsive Columns

Using column-width without column-count lets the browser automatically determine how many columns fit. This is naturally responsive — no media queries needed. The specified width is a minimum; the browser may use wider columns but never narrower.

Responsive Columns with column-width (resize to see)

Masonry-Style Card Gallery

Block-level cards in a multi-column container with break-inside: avoid to prevent cards from splitting across columns. Cards have varying heights to show the masonry effect.

Masonry Card Gallery with break-inside: avoid

Without break-inside: avoid, the browser would split cards across column boundaries, cutting a card in half with the top in one column and the bottom in the next. This property is essential for any block-level content inside a multi-column container.

Column Spanning

Use column-span: all to create a full-width element that breaks out of the column flow. This is useful for headings, pull-quotes, or section dividers that should stretch across all columns.

Column Spanning with column-span: all

Note that column-span only accepts all or none — you cannot span a specific number of columns. The spanning element breaks the column flow, and a new column context begins below it.

Columns vs Grid Comparison

Multi-column layout and CSS Grid both create multi-column appearances, but they flow content in fundamentally different directions. Columns flow content vertically (top-to-bottom, then the next column), while Grid flows content horizontally (left-to-right, row by row).

Multi-Column (vertical flow) vs CSS Grid (horizontal flow)

In the multi-column layout, items are ordered 1-2-3 down the first column, 4-5-6 down the second, and 7-8-9 down the third. In the CSS Grid, items fill row by row: 1-2-3 across the first row, 4-5-6 across the second, and 7-8-9 across the third.

Use multi-column when content should flow vertically like a newspaper — long text, image galleries, masonry card layouts.

Use CSS Grid when items should fill rows left-to-right — product grids, dashboards, form layouts, or any design where horizontal order matters.

Common AI Mistakes

Ignoring multi-column layout entirely. AI agents almost always reach for CSS Grid or JavaScript when asked to create masonry layouts or newspaper-style text. Multi-column layout is simpler and more appropriate for these use cases.
Using column-count when column-width is better. A fixed column count breaks on narrow viewports. column-width provides natural responsiveness without media queries.
Forgetting break-inside: avoid on block-level content. Without it, cards, images, and other block elements get split across column boundaries — a very common visual bug.
Expecting column-span to accept numeric values. Only column-span: all or column-span: none are valid. You cannot span 2 of 3 columns.
Confusing multi-column flow direction with Grid. Content flows top-to-bottom in multi-column layout. If horizontal (row-by-row) ordering is required, CSS Grid is the correct tool.
Using margin-bottom without break-inside: avoid. In a column container, margin on block items does not prevent column breaks. Always combine margins with break-inside: avoid for card-style layouts.

When to Use