CSS Advanced

CSS Multiple Columns

CSS multi-column layout flows content into newspaper-style columns automatically. This guide covers column-count and column-width, the gap and rule between columns, spanning headings, and controlling breaks, with runnable examples.

Multi-Column Layout

The multi-column module lets a single block of text flow across several columns without you splitting the markup. The browser balances the content and reflows it if the container width changes, which makes it ideal for long articles and definition lists.

column-count vs column-width

There are two ways to define columns. column-count fixes the number of columns; column-width suggests an ideal width and lets the browser fit as many as it can. Using both, or the column shorthand, sets a maximum count with a minimum width.

/* Exactly three columns */
.a { column-count: 3; }

/* As many ~200px columns as fit */
.b { column-width: 200px; }

/* Shorthand: count and width together */
.c { columns: 3 200px; }

Gaps and Rules

column-gap sets the space between columns, and column-rule draws a divider line in that gap, using the same syntax as border.

Run this — three columns with a rule

Example

<!DOCTYPE html>
<html>
<head>
<style>
  .news {
    column-count: 3;
    column-gap: 28px;
    column-rule: 1px solid #cbd5e1;
    font: 14px/1.6 Georgia, serif;
    text-align: justify;
  }
</style>
</head>
<body>
  <div class="news">
    CSS multi-column layout flows a single stream of text across several columns. The browser decides where each column breaks and keeps them balanced. Resize the preview and watch the text reflow. This is far easier than manually splitting paragraphs into separate elements, and it stays responsive as the container changes width. Columns are perfect for long-form reading where line length would otherwise become uncomfortably wide on large screens.
  </div>
</body>
</html>

Property	Purpose	Example
column-count	Fixed number of columns	column-count: 3
column-width	Ideal column width	column-width: 200px
columns	Shorthand for count and width	columns: 3 200px
column-gap	Space between columns	column-gap: 24px
column-rule	Divider line in the gap	1px solid #ccc
column-span	Element spans all columns	column-span: all

Spanning a Heading Across Columns

column-span: all pulls an element out of the column flow so it stretches across the full width, like a headline above newspaper columns.

Run this — a full-width heading over columns

Example

<!DOCTYPE html>
<html>
<head>
<style>
  .layout { column-count: 2; column-gap: 24px; font: 14px/1.6 sans-serif; }
  .layout h3 {
    column-span: all;
    margin: 0 0 10px;
    color: #4f46e5;
  }
</style>
</head>
<body>
  <div class="layout">
    <h3>Weekly Digest</h3>
    This heading spans both columns because of column-span: all, while the body text below it flows into two balanced columns. The browser handles the wrapping automatically and keeps the columns even, giving you a clean editorial layout with almost no markup.
  </div>
</body>
</html>

💡

Use break-inside: avoid on cards or list items inside columns to stop a single item from being split across a column boundary.

⚠️

Multi-column layout balances content vertically, so column heights depend on the amount of text. It is best for reading flow, not for precise grid alignment — use CSS Grid for that.

Key points

column-count fixes the number of columns; column-width fits as many as possible.
The columns shorthand combines count and width.
column-gap sets spacing; column-rule draws a divider using border syntax.
column-span: all makes an element stretch across every column.
Use break-inside: avoid to keep items from splitting across columns.