Multiple Columns

Learn how to split text into multiple vertical columns using CSS Multi-column Layout, creating a newspaper-style reading experience without complex JavaScript or HTML restructuring.

What it is

The CSS Multi-column Layout module allows you to flow content from one column to the next automatically. Think of it as pouring water into a series of connected glasses: the browser calculates how much text fits in each column and distributes the rest evenly. Key properties include column-count (number of columns), column-width (ideal width per column), and column-gap (space between columns). Related terms include "column rules" (vertical lines separating columns) and "break-inside" (controlling where elements can split).

Why it matters

• Improved readability: Shorter line lengths reduce eye strain for long-form text.
• Responsive design: Columns adjust naturally based on viewport width when using column-width.
• Semantic simplicity: Keeps HTML clean by avoiding manual column divs or grid containers for simple text flows.
• Newspaper aesthetics: Mimics traditional print layouts for editorial content.

Syntax or steps

To create a multi-column layout, apply these properties to a container element:

1. Set column-count to define the number of columns, OR use column-width to let the browser decide the count based on available space.
2. Add column-gap to specify spacing between columns.
3. Optionally, add column-rule to draw vertical lines between columns.
4. Use break-inside: avoid; on child elements (like images or quotes) to prevent them from splitting across columns.

Example

<style>
  .article {
    column-count: 3;
    column-gap: 2rem;
    column-rule: 1px solid #ddd;
  }

  .article p {
    margin-top: 0;
  }

  .pull-quote {
    break-inside: avoid;
    font-style: italic;
    padding: 1rem;
    background-color: #f9f9f9;
  }
</style>

<div class="article">
  <p>Lorem ipsum dolor sit amet...</p>
  <blockquote class="pull-quote">This quote will not split.</blockquote>
  <p>More text continues here...</p>
</div>

Explanation: The .article container splits its direct children into three equal columns with a 2rem gap. A thin gray line separates the columns via column-rule. The .pull-quote uses break-inside: avoid to ensure the entire block stays within one column, preventing awkward mid-sentence breaks.

Common mistakes

• Forgetting margins: Default paragraph margins can cause uneven column heights. Reset top margins (margin-top: 0) on first-child paragraphs if needed.
• Ignoring overflow: If content is too short, columns may look unbalanced. Use column-fill: balance (default) or auto depending on desired behavior.
• Splitting interactive elements: Buttons or links spanning columns can confuse users. Always apply break-inside: avoid to non-text elements.
• Mixing with Flexbox/Grid incorrectly: Multi-column layout works best for flowing text. For rigid card layouts, use CSS Grid instead.

When to use it

Use Multi-column when you want text to flow naturally like a newspaper. Use Grid when you need precise control over item placement and sizing.

Practice

Guided Exercise: Create a div with 4 columns, a 1.5rem gap, and a dashed rule. Add three paragraphs of lorem ipsum. Observe how the text flows.

Challenge: Add an image inside the column container. Ensure the image does not break across columns. Hint: Wrap the image in a figure tag and apply break-inside: avoid.

Quick check

Q: Which property prevents an element from being split across two columns?

A: break-inside: avoid;

Summary

CSS Multi-column Layout simplifies creating newspaper-style text flows by automating column distribution. It is ideal for readable long-form content but should be paired with break-inside controls to maintain visual integrity for non-text elements.