CSS Multi-Column Layout: column-count, column-width and Newspaper Design

1. What CSS Multi-Column Layout can really do

The CSS Multi-Column Layout has been part of the CSS specification for well over a decade, yet it is barely used in everyday modern web development. Still, it solves a fundamental readability problem: long running text inside a single wide container becomes hard to read on large screens, because the line length far exceeds the typographically recommended 45 to 75 characters. CSS Multi-Column Layout automatically splits that text into several columns, just like a newspaper, without needing JavaScript, flexbox hacks or manually chopping content up in the HTML.

What many people do not realize is that CSS Multi-Column Layout is not limited to running text. It works beautifully for image galleries with elements of varying height, for list layouts, for FAQ sections, and as a masonry-like alternative, as long as the elements can be ordered top to bottom rather than left to right. The combination of column-count, column-width, column-gap, break-inside and column-span covers a surprisingly wide range of layout requirements that Grid and Flexbox alone cannot solve quite as elegantly.

2. column-count: controlling the exact number of columns

The simplest property in CSS Multi-Column Layout is column-count. It defines how many columns the container's content is split into. The browser then calculates the column width automatically: available container width divided by the number of columns, minus the gaps. A container with column-count: 3 at 900 pixels wide and a 20 pixel gap produces three columns of roughly 287 pixels each. Content flows automatically from top to bottom and left to right through the columns, with the browser handling all of the column management.

What makes column-count special is that the value auto hands the calculation over to column-width. When both properties are defined, the browser treats column-count as a maximum: it never creates more than the specified number of columns, but it will create fewer if there is not enough space for the minimum column-width. This interplay is the key to responsive CSS Multi-Column Layout without media queries. The shorthand columns: 3 200px combines both properties in a single declaration.

/* Basic multi-column layout: three equal columns */
.newspaper-text {
  column-count: 3;
  column-gap: 2rem;
  column-rule: 1px solid #e2e8f0;
  orphans: 3;
  widows: 3;
}

/* Responsive: minimum column width drives the count */
.responsive-columns {
  columns: 3 220px; /* max 3 columns, min 220px each */
  column-gap: 1.5rem;
}

/* Auto-fill: as many columns as fit at 200px min */
.auto-columns {
  column-width: 200px;
  column-gap: 1rem;
}

/* Fixed count with balance */
.balanced-columns {
  column-count: 2;
  column-fill: balance; /* default: equal height columns */
}

/* Fill columns top-to-bottom (no balancing) */
.sequential-columns {
  column-count: 3;
  column-fill: auto;
  height: 400px; /* required for column-fill: auto */
}

A common misunderstanding around CSS Multi-Column Layout concerns column-fill: auto. This variant fills columns from left to right instead of distributing content evenly. That only makes sense when the container has a fixed height, otherwise auto produces a single, excessively long column. In most cases the default value balance is the right choice, since it keeps all columns at roughly the same height.

3. column-width: responsive columns without media queries

column-width is the smarter of the two column properties in CSS Multi-Column Layout. It does not define an exact width but rather a minimum width for a column. The browser calculates how many columns of that minimum width fit inside the container and creates exactly that many, with the actual column width distributed evenly across the available space. The result: on a 1200px wide desktop, column-width: 280px produces four columns. On a 600px wide tablet, two. On a 320px smartphone, one. Fully automatic, without a single media query.

This behavior makes column-width the ideal tool for content whose readability depends on a minimum column width. A reading container for running text should never shrink below 220 pixels, and column-width: 220px guarantees exactly that. CSS Multi-Column Layout then adapts itself to every screen size. Unlike Flexbox with flex-wrap or CSS Grid with auto-fill, this does not produce incomplete last rows, because all columns share the same container and the content flows across them seamlessly.

4. column-gap and column-rule: spacing and dividing lines

Spacing between columns in CSS Multi-Column Layout is controlled exclusively through column-gap. Margins and paddings on the column elements themselves have no effect on the space between columns. The default value is browser specific and typically around 1em. For consistent results, column-gap should always be set explicitly. Note that column-gap uses the same key as Flexbox and Grid: since the gap properties were unified in CSS Box Alignment Level 3, column-gap is the standardized name, and the older grid-column-gap and the multi-column column-gap are identical.

The column-rule property draws a dividing line between columns, similar to border, but without affecting the layout flow since it takes up no space of its own. The dividing line sits centered within the column-gap. The shorthand column-rule: 1px solid #94a3b8 is equivalent to combining column-rule-width, column-rule-style and column-rule-color. For newspaper layouts, a subtle column-rule is typographically important, visually separating the columns without making the content disappear.

/* Column gap and decorative rule */
.editorial-columns {
  column-count: 3;
  column-gap: 3rem;
  column-rule: 1px solid #cbd5e1;
}

/* Wide gap with thick decorative rule */
.magazine-layout {
  columns: 2 300px;
  column-gap: 4rem;
  column-rule: 3px double #7c3aed;
}

/* Invisible gap, no rule, purely spatial */
.clean-columns {
  column-count: 4;
  column-gap: 1.5rem;
  /* no column-rule for a clean, borderless look */
}

/* Gap with CSS custom properties for theming */
.themed-columns {
  --col-gap: clamp(1rem, 3vw, 3rem);
  column-count: 3;
  column-gap: var(--col-gap);
  column-rule: 1px solid var(--color-border, #e2e8f0);
}

/* Responsive gap via clamp */
.fluid-gap-columns {
  column-width: 240px;
  column-gap: clamp(1rem, 2.5vw, 2.5rem);
}

5. break-inside: protecting content from being torn apart

The biggest practical problem with CSS Multi-Column Layout is content getting torn apart at column boundaries. Cards, images with captions, quotes and form blocks should never end halfway through one column and continue in the next. The break-inside: avoid property prevents exactly that: the browser pushes the entire element into the next column instead of splitting it. This is the single most important control property in CSS Multi-Column Layout and should be set on every block element that needs to be perceived as a self-contained unit.

In addition there are break-before and break-after, with the values column and avoid-column. With break-before: column an element always starts in a new column, which is useful for sections that should always begin at the top of a column. With break-after: avoid-column a column break is prevented right after an element, which is ideal for headings that should never sit at the bottom of a column while their paragraph only begins in the next one. The orphans and widows properties additionally control how many lines of text must remain at the start or end of a column at minimum.

/* Prevent card from splitting across columns */
.card {
  break-inside: avoid;
  /* older prefixed property for legacy support */
  -webkit-column-break-inside: avoid;
}

/* Heading always starts a new column */
.section-heading {
  break-before: column;
}

/* Heading never stranded at bottom of column */
h2, h3 {
  break-after: avoid-column;
}

/* Keep image with its caption */
figure {
  break-inside: avoid;
  margin: 0 0 1.5rem 0;
}

/* Minimum lines before / after a column break */
.article-text {
  column-count: 3;
  column-gap: 2rem;
  orphans: 3;
  widows: 3;
}

/* Gallery items, each stays intact */
.gallery-item {
  break-inside: avoid;
  display: inline-block; /* triggers block formatting context */
  width: 100%;
}

6. column-span: stretching elements across all columns

With column-span: all, an element is lifted out of the column flow and stretches across the full width of the multi-column container. This is the classic newspaper pattern for large headlines and lead images that span the entire column container while the rest of the text flows normally in columns. Note that column-span only accepts the values none (default) and all: it is not possible to stretch an element across exactly two of three columns.

CSS Multi-Column Layout treats elements with column-span: all as a break point: the content before the spanning element is split into columns and ends there, and a new column block begins after the spanning element. This mechanism enables complex editorial layouts directly in the browser that used to require negative margins, absolutely positioned elements or JavaScript. From a typographic standpoint, column-span: all is the most precise tool for structural division within a CSS Multi-Column Layout container.

7. A masonry alternative with CSS Multi-Column Layout

Masonry layout, where elements of varying height are stacked in a grid like stones in a wall, is often treated as a pure JavaScript problem. CSS Multi-Column Layout is a functional alternative for cases where a top-to-bottom reading order is acceptable. Cards of different heights are placed inside a multi-column container, each card gets break-inside: avoid, and the browser stacks them column by column automatically. The result looks visually like masonry, but the reading direction differs: multi-column reads vertically (column one from top to bottom, then column two), while a classic masonry grid reads horizontally.

For many use cases, such as image galleries, testimonials, blog cards or FAQ lists, a vertical reading order is entirely acceptable. CSS Multi-Column Layout has a clear advantage over JavaScript masonry here: it works without JavaScript, is fully accessible, and the browser calculates element heights correctly even when they contain images, dynamically loaded content or complex typography. Performance is noticeably better than JavaScript solutions that have to recalculate on resize events.

8. Newspaper layout: classic editorial design in the browser

Newspaper layout is the origin of the CSS Multi-Column Layout module. A classic newspaper has several columns, the headline spans all of them, images can span one or several columns (though in CSS Multi-Column Layout the latter is only possible for the whole container), and dividing lines between columns provide typographic structure. These design principles translate directly into CSS Multi-Column Layout: an article container with column-count: 3, a headline with column-span: all, paragraphs with orphans: 3 and widows: 3, and a subtle column-rule between columns.

In practice, CSS Multi-Column Layout is combined with CSS Grid for the outer page structure. Grid defines the main regions (header, sidebar, main content, footer), while the multi-column module splits the running text into columns within the main content area. This separation of macro layout (Grid) and micro layout (Multi-Column) is architecturally clean and matches the original CSS design principle that different modules should own different layout levels.

9. CSS Multi-Column Layout head to head

CSS Multi-Column Layout competes in certain use cases with Flexbox, CSS Grid and JavaScript-based masonry libraries. The choice between these techniques depends on the desired reading direction, the need for even column widths, and how much exact positioning is required. Flexbox and Grid suit macro layouts where every element needs to sit in an exact cell or an exact flexbox position. CSS Multi-Column Layout suits content that should be treated as flowing text or an unstructured collection of elements, where the precise position of each element does not matter as long as the overall picture looks right.

The most important advantage of CSS Multi-Column Layout over JavaScript masonry is automatic height calculation. JavaScript libraries like Masonry.js have to measure the height of every element, wait for images to load, and recalculate everything on resize events. CSS Multi-Column Layout delegates all of that to the browser's rendering engine, which performs these calculations internally with far less overhead. The result: faster initial rendering, no FOUC (flash of unstyled content), and full functionality with no JavaScript at all.

/* Complete editorial / newspaper layout */
.article-body {
  column-count: 3;
  column-gap: 2.5rem;
  column-rule: 1px solid #e2e8f0;
  orphans: 3;
  widows: 3;
  text-align: justify;
  hyphens: auto;
}

/* Full-width headline inside column container */
.article-body > h1,
.article-body > .lead-image {
  column-span: all;
  margin-bottom: 2rem;
}

/* Cards / callouts never split */
.article-body .callout,
.article-body figure,
.article-body blockquote {
  break-inside: avoid;
}

/* Masonry-like gallery without JavaScript */
.masonry-gallery {
  columns: 4 200px;
  column-gap: 1rem;
}

.masonry-gallery .item {
  break-inside: avoid;
  margin-bottom: 1rem;
}

/* Responsive article: 1 column on mobile, up to 3 on desktop */
@media (max-width: 640px) {
  .article-body {
    column-count: 1;
  }
}

10. Summary

CSS Multi-Column Layout is a native browser feature that enables newspaper layouts, masonry-like galleries and responsive text splitting without JavaScript. column-count sets the exact number of columns. column-width defines a minimum width and thereby produces automatic responsive behavior without media queries. column-gap controls the spacing between columns, and column-rule adds typographic dividing lines without affecting the layout flow. break-inside: avoid protects cards, images and other block elements from being torn apart at column boundaries.

The decisive advantage of CSS Multi-Column Layout over JavaScript alternatives lies in the browser's native height calculation, the absence of any JavaScript dependency, and automatic accessibility. Anyone who has overlooked this module so far will be surprised how many layout requirements, from FAQ sections to image galleries to editorial articles, it can solve elegantly without writing a single line of JavaScript.

11. FAQ: CSS Multi-Column Layout