CSS Multi-Column Layout: Newspaper and Magazine Layouts

The CSS multi-column specification lets you flow content into multiple vertical columns — like a newspaper or magazine. It's perfect for text-heavy content, FAQ sections, feature lists, and editorial layouts.

---

1. The Two Ways to Define Columns

/* Method 1: column-count — fixed number of columns */
.c-article { column-count: 3; }
/* Content flows into exactly 3 equal-width columns */

/* Method 2: column-width — ideal width, browser picks count */
.c-article { column-width: 250px; }
/* Browser: "fit as many 250px columns as possible" */
/* On 1200px container: 4 columns (300px each with gap) */
/* On 600px container: 2 columns */

/* Method 3: columns shorthand (width count) */
.c-article { columns: 250px 3; }
/* Both values: column-width is the ideal, count is the maximum */
/* Uses: min(count, floor(container / width)) */

---

2. Column Gap and Rule

.c-multicol {
  column-count: 3;
  column-gap: 2rem;          /* Space between columns (default: 1em) */

  /* Column rule — like a border between columns */
  column-rule: 1px solid var(--color-border);
  /* Shorthand: column-rule-width | column-rule-style | column-rule-color */

  /* Individual rule properties */
  column-rule-width: 1px;
  column-rule-style: solid;     /* solid, dashed, dotted — same as border-style */
  column-rule-color: var(--color-border);
}

---

3. Spanning an Element Across All Columns

/* Make a heading span all columns — breaks the column flow */
.c-multicol__heading {
  column-span: all;    /* Spans all columns */
  margin-bottom: 1.5rem;
}

/* column-span: none (default) — element stays in one column */
/* column-span: all — element breaks out and spans all columns */

/* Practical use: section dividers within a multi-column block */

<div class="c-multicol">
  <h2 class="c-multicol__heading">This heading spans all columns</h2>
  <p>This paragraph flows in the first column...</p>
  <p>More content continues flowing across columns...</p>
  <h3 class="c-multicol__subheading">Subheadings stay in one column</h3>
  <p>Content after the subheading...</p>
</div>

---

4. Column Filling

/* column-fill: how columns are filled */

column-fill: balance;    /* Default: browser tries to balance column heights */
                         /* Columns are roughly equal height */

column-fill: auto;       /* Fill each column completely before starting next */
                         /* Only relevant when content has a height constraint */

/* With height constraint: auto fills top-to-bottom */
.c-multicol-fixed {
  column-count: 3;
  height: 400px;
  column-fill: auto;     /* Column 1 fills to 400px, then column 2, etc. */
}

---

5. Controlling Column Breaks

Control where columns break — prevent awkward splits through content:

/* break-inside: prevent element from being split across columns */
.c-card {
  break-inside: avoid;     /* Keep entire card in one column */
}

/* Same for specific content types */
figure       { break-inside: avoid; }       /* Keep image + caption together */
blockquote   { break-inside: avoid; }       /* Don't break quotes */
.c-code-block { break-inside: avoid; }      /* Keep code blocks intact */
pre          { break-inside: avoid; }

/* break-before / break-after: force a break before or after */
.c-chapter-title {
  break-before: column;   /* Start a new column before this element */
}
.c-section-end {
  break-after: column;    /* Force next column after this element */
}

/* Values: auto, avoid, column, page, always */

---

6. Real-World Patterns

Newspaper Article Layout

.c-article {
  column-count: 2;
  column-gap: clamp(1.5rem, 4vw, 3rem);
  column-rule: 1px solid var(--color-border);

  /* Allow long hyphenation in narrow columns */
  hyphens: auto;
  -webkit-hyphens: auto;

  /* Prevent orphans and widows */
  orphans: 3;    /* Min lines at bottom of column before break */
  widows: 3;     /* Min lines at top of column after break */
}

/* Feature image spans full width */
.c-article__hero {
  column-span: all;
  margin-bottom: 2rem;
}

/* Pull quotes span full width */
.c-article__pullquote {
  column-span: all;
  text-align: center;
  font-size: var(--text-xl);
  font-style: italic;
  border-block: 2px solid var(--color-primary);
  padding-block: 1.5rem;
  margin-block: 2rem;
}

/* Individual content elements stay together */
.c-article p   { break-inside: avoid; }
.c-article img { break-inside: avoid; width: 100%; }

Responsive FAQ / Feature List

.c-faq-list {
  columns: 280px 2;       /* 2 columns max, 280px each */
  column-gap: 2rem;
}

.c-faq-item {
  break-inside: avoid;    /* Don't split question+answer across columns */
  margin-bottom: 1.5rem;
}

/* On small screens: drops to 1 column automatically */

Masonry-Style List (Approx)

/* Multi-column creates a Pinterest-like masonry approximation */
/* Items flow top-to-bottom then left-to-right (not true masonry) */
.c-gallery-masonry {
  column-count: 3;
  column-gap: 1rem;
}

.c-gallery-masonry__item {
  break-inside: avoid;
  margin-bottom: 1rem;
  width: 100%;
}
/* Note: True masonry (grid-template-rows: masonry) is experimental */

---

7. Typography Inside Columns

/* Hyphens: allow words to hyphenate at column edge */
.c-multicol {
  hyphens: auto;           /* Browser auto-hyphenates (needs lang attribute) */
  hyphens: manual;         /* Only hyphenate at soft hyphens: ­ */
  hyphens: none;           /* No hyphenation */

  /* Requires: <html lang="en"> for browser to know the language */
}

/* Orphans and widows */
.c-multicol p {
  orphans: 2;   /* At least 2 lines must remain at bottom before a column break */
  widows: 2;    /* At least 2 lines must appear at top after a column break */
}

/* text-align with columns */
.c-multicol {
  text-align: justify;      /* Justified text looks more editorial */
  hyphens: auto;            /* Combine with justified — prevent huge gaps */
}

---

8. Browser Support

Multi-column layout has excellent support:

Browser	Support
Chrome	✅ Full
Firefox	✅ Full
Safari	✅ Full
Edge	✅ Full
Global	~97%

---

9. When to Use Multi-Column Layout

✅ Good use cases:
  - Long-form article text (newspaper-style)
  - FAQ sections (2-column Q&A)
  - Feature/benefit lists (3 columns)
  - Footer with multiple link groups (before Grid was common)
  - Dictionary / glossary pages
  - Compact navigation with many items

❌ Avoid when:
  - Content has interactive elements (columns can cut through a card)
  - You need control over column assignment (Grid is better)
  - Items need to be in a specific order visually (columns fill top-down)
  - Cards/tiles layout (Grid or Flexbox are better)