CSS Multiple Columns

Multiple Columns

CSS multi-column layout lets you flow text into multiple columns like a newspaper. It is ideal for long text blocks and simple content layouts.

You can define columns using:

• column-count – number of columns
• column-width – preferred column width (browser decides the count)
• columns – shorthand

Example using column-count:

.article {
  column-count: 3;
  column-gap: 24px;
}

Example using column-width:

.article {
  column-width: 260px;
  column-gap: 24px;
}

Shorthand:

.article {
  columns: 3 260px; /* column-count + column-width */
}

Column Gap

column-gap controls the space between columns.

.article {
  column-count: 3;
  column-gap: 32px;
}

Tip: If the gap is too small, multi-column text becomes harder to read.

Column Rule

column-rule draws a line between columns (similar to a border).

.article {
  column-count: 3;
  column-gap: 28px;
  column-rule: 1px solid rgba(0,0,0,.18);
}

You can also use the longhand properties:

.article {
  column-rule-width: 1px;
  column-rule-style: solid;
  column-rule-color: rgba(0,0,0,.18);
}

Spanning Content

Sometimes you want a heading or block element to span across all columns. Use column-span.

.article h2 {
  column-span: all;
}

Example structure:

<div class="article">
  <h2>Section Title</h2>
  <p>Long text...</p>
  <p>More text...</p>
</div>

Note: Multi-column layout is best for flowing text. For full page grids and app layouts, prefer CSS Grid or Flexbox.

Summary

• Use column-count or column-width to create multi-column flow.
• column-gap controls spacing between columns.
• column-rule draws a separator line between columns.
• column-span: all lets elements span across all columns.