Multi-column Layout

CSS multi-column (columns, column-gap, break-inside) for article flows — not card grids — and how to avoid awkward splits.

intermediate3 min readUpdated Aug 4, 2026

css
multi-column
layout

Multi-column layout (columns, column-width, column-count) flows content into newspaper-style columns. It is for continuous prose and figure streams, not for equal card grids (use Grid) or toolbars (use Flex).

Docs: MDN multiple-column layout, columns.

Core properties

.article-body {
  column-width: 18rem;   /* browser makes as many as fit */
  column-gap: 2rem;
  column-rule: 1px solid var(--border);
}

/* Or fixed count */
.narrow-note {
  column-count: 2;
  column-gap: 1.5rem;
}

Shorthand: columns: 18rem or columns: 2.

Content fills column by column (block direction progresses within a column, then to the next). Readers of long articles on wide screens get shorter line lengths without manual markup splits.

Controlling breaks

.article-body h2 {
  break-after: avoid; /* try not to leave heading alone */
}

.article-body figure,
.article-body blockquote {
  break-inside: avoid;
  margin: 0 0 1rem;
}

.article-body img {
  max-width: 100%;
  height: auto;
}

break-inside: avoid keeps a figure from splitting across columns. Support and strictness vary; test.

.section-break {
  break-before: column; /* force new column */
}

Span all columns

.article-body .lead {
  column-span: all;
  margin-block-end: 1.25rem;
  font-size: 1.125rem;
}

Useful for a full-width intro or pull quote inside a multi-col block.

When not to use multicol

Goal	Prefer
Card matrix / product grid	CSS Grid
Nav / toolbar	Flexbox
Magazine page with explicit regions	Grid areas or regions-like design
Infinite masonry of mixed tiles	Grid / JS libraries carefully

Multicol will rebalance content as height changes; that reflow can feel jumpy for interactive widgets inside columns.

Accessibility and UX

Long multi-column text on a short viewport can force awkward vertical + horizontal reading paths — often better for print or wide desktop articles.
Ensure keyboard focus order still follows DOM order (it does) even if visual column reading order confuses some users.
Don’t put primary forms or complex widgets into multicol without testing tab flow and screen magnification.

Print

Multi-column shines in print stylesheets for dense content. Pair with @media print and sensible orphans / widows where supported.

@media print {
  .article-body {
    columns: 2;
    column-gap: 2rem;
  }
}

Interview out-loud

“Multi-column layout flows continuous content into columns with column-width or column-count. I use column-gap, optional column-rule, and break-inside: avoid on figures. It’s not a substitute for grid card layouts. Best for article-like content and print; careful with interactive UI inside columns.”

Footguns

Using multicol for cards — uneven “columns” of separate boxes.
Splitting headings/figures without break controls.
Nested overflow scrollers inside columns.
Expecting grid-like explicit placement.
Mobile: forcing 2 columns on 320px widths with unreadable measures.

Balancing and fill

.article-body {
  columns: 2;
  column-gap: 2rem;
  column-fill: balance; /* default balancing behavior in many engines for print-like layouts */
}

Continuous media vs paged media behave differently for balancing. For interactive pages, test scroll height — multicol can create short wide containers that feel odd next to single-column comments.

Hyphenation and measure

.article-body {
  column-width: 20rem;
  hyphens: auto;
  text-wrap: pretty; /* where supported */
}

Set lang correctly so hyphenation dictionaries work. Column width around 45–75 characters per line remains a good readability target even inside multicol.