CSS Multi-column Layout: Column Count, Width, and Spanning

CSS multi-column layout lets you split content into columns, much like a newspaper or magazine page. It is useful when you want readable flowing text across multiple vertical columns without manually placing items into a grid.

Quick answer: Use column-count if you want a set number of columns, column-width if you want flexible columns of a target width, and column-span if an element should stretch across all columns.

Difficulty: Beginner

You'll understand this better if you know: basic CSS selectors, how block elements flow in normal document layout, and simple properties like width, margin, and overflow.

1. What Is CSS Multi-column Layout?

CSS multi-column layout, often called multicol, is a layout system that flows content into multiple columns inside a single container. Instead of placing each item into an exact grid cell, the browser automatically balances and fills the columns based on the available space and the column settings you choose.

It is designed for flowing content, especially long text.
The browser can create columns automatically from one container.
It supports fixed column counts, flexible column widths, and column spans.
It works best when content should read top-to-bottom in each column.

Multi-column layout is not the same as CSS Grid or Flexbox. Grid and Flexbox are better for page structure and item placement, while multicol is best for continuous content that should wrap into columns naturally.

2. Why CSS Multi-column Layout Matters

Multi-column layout helps you present long content in a way that is easier to scan on wide screens. It can make articles, dictionaries, glossaries, and reference pages feel more compact and readable without needing extra markup.

It matters because you can improve readability while keeping the HTML simple. You define the columns in CSS, and the browser handles the flow of content.

Use it when the reading experience benefits from vertical columns. Avoid it when you need strict item positioning, complex alignment, or interactive layout behavior, because Grid is usually a better fit there.

3. Basic Syntax or Core Idea

The core idea is simple: apply column settings to a container, and its direct content flows into columns automatically.

Minimal example

This example creates three columns with a gap between them.

.article {
  column-count: 3;
  column-gap: 1.5rem;
}

column-count tells the browser how many columns to create, and column-gap controls the space between them. The browser then divides the content into those columns automatically.

Using a target column width

You can also let the browser decide how many columns fit by using column-width.

.article {
  column-width: 18rem;
  column-gap: 1.5rem;
}

With column-width, the browser creates as many columns as fit the container while keeping each column near the target width.

Spanning all columns

Some elements, like headings or callouts, can span the full width of the column container.

h2 {
  column-span: all;
}

This makes the heading break out of the column flow so it stretches across the entire multicol container.

4. Step-by-Step Examples

Example 1: A simple newspaper-style article

This example turns a block of prose into columns so the text reads like a magazine layout.

.news {
  column-count: 2;
  column-gap: 2rem;
}

This is a good fit for long-form text on medium and large screens. The browser automatically fills the first column before continuing to the next one.

Example 2: Responsive columns with a preferred width

When the container gets narrower, fixed column counts can feel cramped. A target width adapts better.

.cards-note {
  column-width: 20rem;
  column-gap: 1.25rem;
}

As the available width changes, the browser may show one, two, or more columns. This makes the layout easier to adapt without writing breakpoints for every case.

Example 3: Letting a heading span across columns

A section heading often looks better if it does not split across columns.

.article h2 {
  column-span: all;
}

Here, the heading stays readable and visually separates sections, while the surrounding paragraphs continue in columns below it.

Example 4: Adding a rule between columns

You can style the visual separator between columns with column-rule.

.article {
  column-count: 2;
  column-gap: 2rem;
  column-rule: 1px solid #ccc;
}

The rule is decorative only. It helps visually separate columns, but it does not replace spacing or improve structure.

5. Practical Use Cases

Magazine-style articles with long paragraphs.
Glossaries and reference pages where users scan many short entries.
Legal or policy pages that benefit from a compact reading width on wide screens.
Text-heavy documentation pages with introductory content or side notes.
Printed layouts where multi-column flow matches the page format.

Multi-column layout is strongest when the content is mostly text. It is less useful for dashboards, forms, and component-heavy interfaces.

6. Common Mistakes

Mistake 1: Expecting multicol to place items like a grid

New developers often expect each block to go into a specific column position. Multi-column layout does not work that way; it simply flows content from one column to the next.

Problem: Grid-like item placement is not supported, so trying to control exact column positions with multicol leads to confusing results.

.layout {
  column-count: 3;
}

.item-a {
  column: 1;
}

Fix: Use CSS Grid when you need specific placement.

.layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.item-a {
  grid-column: 1;
}

The corrected version works because Grid gives you explicit placement control.

Mistake 2: Putting important blocks into the column flow

Some elements, such as large callouts, media, or forms, are awkward when split across columns. They may be broken apart or become harder to read.

Problem: Without a span rule, a block may stay inside the column flow and lose the emphasis or width it needs.

.article {
  column-count: 2;
}

.notice {
  background: #f5f5f5;
}

Fix: Let the block span all columns when it needs full width.

.notice {
  column-span: all;
  background: #f5f5f5;
}

The corrected version works because the notice is removed from the column flow and becomes easier to read.

Mistake 3: Assuming column gap is the same as margin

column-gap controls the space between columns only. It does not add spacing before the first column or after the last column the way margins can.

Problem: If you only set column-gap, the outer edges of the container may still look too tight.

.article {
  column-count: 3;
  column-gap: 2rem;
}

Fix: Add padding to the container when you also want space around the outside.

.article {
  column-count: 3;
  column-gap: 2rem;
  padding: 1rem;
}

The corrected version works because padding creates outer breathing room while the column gap stays between columns.

7. Best Practices

Practice 1: Use multicol for text, not app layout

Multi-column layout is excellent for reading flow, but it is not ideal for navigation panels, dashboards, or complex components. Those layouts usually need explicit structure.

.intro {
  column-width: 18rem;
}

Using it on a text-heavy section keeps the intent clear and prevents layout surprises elsewhere on the page.

Practice 2: Prefer column-width for responsive content

A fixed number of columns can become awkward at smaller sizes. A preferred column width lets the browser adapt more naturally.

.reference {
  column-width: 16rem;
  column-gap: 1.5rem;
}

This often produces a better result than forcing a specific count, especially on responsive pages.

Practice 3: Keep headings and important blocks readable

Headings, warnings, and other important blocks should usually span all columns so they stay easy to scan.

.content h2,
.content .callout {
  column-span: all;
}

This improves readability and keeps the document structure obvious.

8. Limitations and Edge Cases

Multi-column layout works best with block content that can flow naturally. It is not a good fit for interactive controls that must stay aligned.
The browser balances content across columns, so the exact line breaks can change with viewport width and font size.
column-span: all is supported in modern browsers, but behavior can differ slightly in print and complex nested layouts.
Floats, positioned elements, and large images can behave differently inside a multicol container than they do in normal block flow.
Very tall content can make columns feel uneven if the browser cannot balance them well, especially when the container has a fixed height.
If you use column breaks with long tables, code blocks, or widgets, the result may be awkward because those elements are not ideal for column flow.

One common surprise is that content order in the source still matters. The browser fills columns in document order, so the reading sequence remains top-to-bottom within each column, not row-by-row like a grid.

9. Practical Mini Project

Here is a small, complete example of a readable article section with a title, a note that spans all columns, and responsive column behavior.

<article class="guide">
  <h2>Travel Notes</h2>
  <p class="note">Pack light, stay flexible, and keep a paper copy of key details.</p>
  <p>The city center is easy to explore on foot, and most attractions are close together.</p>
  <p>Public transit is reliable during the day, but evening routes can be less frequent.</p>
  <p>Local bakeries open early, so breakfast is simple to find before the crowds arrive.</p>
</article>

.guide {
  column-width: 18rem;
  column-gap: 1.5rem;
  max-width: 60rem;
}

.guide h2,
.guide .note {
  column-span: all;
}

.guide .note {
  padding: 0.75rem;
  background: #f3f7ff;
}

This example shows the most useful multicol pattern: flowing paragraphs, responsive column width, and full-width blocks for important content.

10. Key Points

CSS multi-column layout flows content into columns automatically.
column-count sets the number of columns, while column-width sets a preferred column size.
column-gap controls the space between columns.
column-span: all makes a child element stretch across all columns.
Use multicol for readable text layouts, not for precise item positioning.
Grid is usually better when you need explicit layout control.

11. Practice Exercise

Create a two-column reading block that becomes flexible on smaller screens.

Set a container to use multi-column layout.
Use a preferred column width instead of a fixed column count.
Add a heading that spans all columns.
Include at least three paragraphs of text in the container.

Expected output: A readable article section with automatic columns on wide screens and a single column when there is not enough space.

Hint: Try column-width with a value around 16rem to 20rem, then add column-span: all to the heading.

Solution:

<article class="reading">
  <h2>Weekend Guide</h2>
  <p>Start early to avoid crowds and get the best light for photos.</p>
  <p>Walk the historic district first, then take a break at a local cafe.</p>
  <p>Leave some room in your schedule so you can explore unexpected places.</p>
</article>

.reading {
  column-width: 18rem;
  column-gap: 1.5rem;
}

.reading h2 {
  column-span: all;
}

This solution works because the content flows naturally into columns, and the heading remains readable across the full width of the container.

12. Final Summary

CSS multi-column layout is a simple way to turn flowing text into newspaper-style columns. It works best for long-form content where automatic column flow improves readability more than precise placement does.

The most important properties are column-count, column-width, column-gap, and column-span. Once you understand how those properties interact, you can create responsive article layouts without extra markup or complicated positioning.

If you need exact placement, use Grid instead. If you want readable text that adapts to available width, multi-column layout is a practical and lightweight choice.