CSS Multicolumn playground

Distribute editorial content across columns: combine width and count, tune gaps and rules, and control spans and breaks before copying the code.

Guide

Presets

Choose a configuration as a starting point, then adjust any control.

Column definitioncolumn-width suggests an optimal measure, column-count limits the count, and the columns shorthand can combine both. The final width can change to use the available space.

columns

Use only column-width for a responsive column count, only column-count for a fixed count, or combine both to set a preferred width and a maximum count.

column-widthcolumn-countwidth + count

Unit

Spacing and rulescolumn-rule uses syntax similar to border, but it is painted in the middle of the gap and consumes no space of its own.

column-rule-style

column-rule-color

Flow and fragmentationMulticolumn preserves one flow in DOM order. These controls affect content elements without changing that order.

Make the heading span every column

column-span: all removes the heading from the column flow, stretches it across the container, and starts a new row of columns below.

Avoid breaks inside each section

break-inside: avoid tries to keep each section in one column. It can create gaps when a block does not fit in the remaining space.

Preview

Width960px

Editorial layout with CSS

A practical guide to CSS Multicolumn

Distribute continuous content across columns without changing document order or turning every fragment into an independent component.

The flow stays natural

The browser fills one column and continues in the next. Text, headings, and lists keep the same order they have in the HTML.

This behavior works especially well for articles, glossaries, and continuous reading blocks.

Width or count

column-width suggests an optimal width and lets the browser calculate how many columns fit. column-count sets the maximum visible count.

The columns shorthand can combine both values to preserve a readable measure without exceeding the chosen number.

Spacing also communicates

column-gap separates fragments, while column-rule draws a visual guide in the middle of that space without consuming extra width.

Generous spacing usually helps more than an overly strong rule.

Headings across columns

With column-span: all, a heading can interrupt the flow, occupy the full container, and start a new row of columns below.

It is useful for dividing long text into recognizable editorial sections.

Avoid awkward breaks

break-inside: avoid tries to keep each section together. When there is not enough space, the whole block can move to the next column.

Use it sparingly because tall blocks can leave visible gaps.

When to choose Multicolumn

Multicolumn is designed for a single content flow. Grid and Flexbox are better when every piece needs independent placement.

Try different preview widths to see when a column appears or disappears without resizing the whole window.

HTML

<article class="multicol">
  <header>
    <p>Editorial layout with CSS</p>
    <h2>A practical guide to CSS Multicolumn</h2>
    <p>Distribute continuous content across columns without changing document order or turning every fragment into an independent component.</p>
  </header>

  <section>
    <h3>The flow stays natural</h3>
    <p>The browser fills one column and continues in the next. Text, headings, and lists keep the same order they have in the HTML.</p>
    <p>This behavior works especially well for articles, glossaries, and continuous reading blocks.</p>
  </section>

  <section>
    <h3>Width or count</h3>
    <p>column-width suggests an optimal width and lets the browser calculate how many columns fit. column-count sets the maximum visible count.</p>
    <p>The columns shorthand can combine both values to preserve a readable measure without exceeding the chosen number.</p>
  </section>

  <section>
    <h3>Spacing also communicates</h3>
    <p>column-gap separates fragments, while column-rule draws a visual guide in the middle of that space without consuming extra width.</p>
    <p>Generous spacing usually helps more than an overly strong rule.</p>
  </section>

  <section>
    <h3>Headings across columns</h3>
    <p>With column-span: all, a heading can interrupt the flow, occupy the full container, and start a new row of columns below.</p>
    <p>It is useful for dividing long text into recognizable editorial sections.</p>
  </section>

  <section>
    <h3>Avoid awkward breaks</h3>
    <p>break-inside: avoid tries to keep each section together. When there is not enough space, the whole block can move to the next column.</p>
    <p>Use it sparingly because tall blocks can leave visible gaps.</p>
  </section>

  <section>
    <h3>When to choose Multicolumn</h3>
    <p>Multicolumn is designed for a single content flow. Grid and Flexbox are better when every piece needs independent placement.</p>
    <p>Try different preview widths to see when a column appears or disappears without resizing the whole window.</p>
  </section>
</article>

Tailwind CSS

Some classes with arbitrary values can be replaced by native classes, depending on the value and your Tailwind CSS configuration.

<article class="columns-[14rem] gap-[24px] [column-rule:none]">
  <header class="[column-span:all]">
    <p>Editorial layout with CSS</p>
    <h2>A practical guide to CSS Multicolumn</h2>
    <p>Distribute continuous content across columns without changing document order or turning every fragment into an independent component.</p>
  </header>

  <section>
    <h3>The flow stays natural</h3>
    <p>The browser fills one column and continues in the next. Text, headings, and lists keep the same order they have in the HTML.</p>
    <p>This behavior works especially well for articles, glossaries, and continuous reading blocks.</p>
  </section>

  <section>
    <h3>Width or count</h3>
    <p>column-width suggests an optimal width and lets the browser calculate how many columns fit. column-count sets the maximum visible count.</p>
    <p>The columns shorthand can combine both values to preserve a readable measure without exceeding the chosen number.</p>
  </section>

  <section>
    <h3>Spacing also communicates</h3>
    <p>column-gap separates fragments, while column-rule draws a visual guide in the middle of that space without consuming extra width.</p>
    <p>Generous spacing usually helps more than an overly strong rule.</p>
  </section>

  <section>
    <h3>Headings across columns</h3>
    <p>With column-span: all, a heading can interrupt the flow, occupy the full container, and start a new row of columns below.</p>
    <p>It is useful for dividing long text into recognizable editorial sections.</p>
  </section>

  <section>
    <h3>Avoid awkward breaks</h3>
    <p>break-inside: avoid tries to keep each section together. When there is not enough space, the whole block can move to the next column.</p>
    <p>Use it sparingly because tall blocks can leave visible gaps.</p>
  </section>

  <section>
    <h3>When to choose Multicolumn</h3>
    <p>Multicolumn is designed for a single content flow. Grid and Flexbox are better when every piece needs independent placement.</p>
    <p>Try different preview widths to see when a column appears or disappears without resizing the whole window.</p>
  </section>
</article>

CSS

.multicol {
  columns: 14rem;
  column-gap: 24px;
  column-rule: none;
}

.multicol header {
  column-span: all;
}

.multicol {
  columns: 14rem;
  column-gap: 24px;
  column-rule: none;

  header {
    column-span: all;
  }
}

Visual CSS guide

Understand CSS Multicolumn

Learn how one content flow is fragmented across columns. Check the syntax and try each property in an independent preview.

Back to playground

The Multicolumn mental model

Multicolumn does not create a collection of items. The browser fragments continuous content into anonymous column boxes while preserving document order.

One flow that continues across columnsContent fills one column along the block axis and continues in the next. Columns are fragments of the same element, not independent children.

Width is an optimal measure

column-width suggests a readable measure and the browser calculates how many columns fit. column-count can set the count or cap its maximum.

Spans and breaks reorganize flow

column-span: all crosses the column row. The break-* properties indicate where each block should stay together or be interrupted.

Multicolumn container properties

These properties create columns, relate their width and count, and control the space and visual rule between them.

`columns`

Combines column-width and column-count in one declaration.

Syntax: columns: <'column-width'> || <'column-count'>;
CSS initial value: auto auto
Values: column-widthcolumn-countwidth + count

A length sets the optimal width; an integer sets the count. When both appear, the count becomes a maximum.

Read documentation

`column-width`

Suggests the ideal width of each column box.

Syntax: column-width: auto | <length>;
CSS initial value: auto
Values: auto10rem16ch

This is not an exact width. The browser may widen columns to use available space or narrow them when the container is smaller.

Read documentation

`column-count`

Sets the desired number of columns for the content.

Syntax: column-count: auto | <integer>;
CSS initial value: auto
Values: auto234

With column-width: auto it sets the count. Alongside a non-auto width, it caps the maximum number that can be created.

Read documentation

`column-gap`

Reserves space between column boxes.

Syntax: column-gap: normal | <length-percentage>;
CSS initial value: normal
Values: normal01em2rem

In Multicolumn, the initial normal value uses 1em. The rule is painted in the middle of this space and adds no width of its own.

Read documentation

`column-rule`

Draws a visual rule between columns without separating content further.

Syntax: column-rule: <'column-rule-width'> || <'column-rule-style'> || <'column-rule-color'>;
CSS initial value: medium none currentcolor
Values: none1px solid currentcolor3px double #8b5cf6

It combines width, style, and color like border. The initial none style prevents painting even though the initial width is medium.

Read documentation

Fragmented content properties

Descendants can span every column or request that their box remain together during fragmentation.

break-inside: avoid;

Avoiding a break is a preference, not a guarantee

break-inside: avoid asks to preserve the block, but the browser may fragment it when it cannot fit whole or constraints conflict.

`column-span`

Lets an element span every column.

Syntax: column-span: none | all;
CSS initial value: none
Values: noneall

all interrupts the flow, balances preceding content, and starts a new row of columns after the element.

Read documentation

`break-inside`

Indicates whether fragmentation inside a block should be avoided.

Syntax: break-inside: auto | avoid | avoid-column;
CSS initial value: auto
Values: autoavoidavoid-column

avoid applies to every fragmentation context; avoid-column refers specifically to breaks between columns.

Read documentation

Common Multicolumn pitfalls

Unexpected results usually come from treating width as exact, imposing a height, introducing content that cannot shrink, or relying too heavily on break preferences.

column-width does not produce an exact measure

Expected result: Make every column exactly the declared width.
Cause: The property defines an optimal width and the algorithm distributes available space among the columns that fit.
Solution: Treat the value as a target reading measure and test several container widths instead of relying on an exact pixel size.

A fixed height creates overflow columns

Expected result: Keep all content within the visible inline size of the container.
Cause: When height is limited, the flow may need more columns and continue beyond the available inline space.
Solution: Avoid rigid heights for continuous reading or provide a deliberate scrollport and test its responsive behavior.

Wide content intrudes into the next column

Expected result: Make every image, URL, or code block adapt automatically to its column.
Cause: Content with a large minimum size can overflow its column box and paint across the gap or neighboring column.
Solution: Use max-inline-size: 100% for media and define a wrapping or overflow strategy for long text and code.

break-inside: avoid leaves visible gaps

Expected result: Keep every block together without changing column balance.
Cause: Moving a whole block to the next column can leave the remaining space in the previous one unused.
Solution: Reserve avoid for units that truly need to stay together and test the result with real content and heights.

Multicolumn compared with other layout models

Multicolumn fragments one continuous flow; Grid and Flexbox relate independent children. The content structure indicates which model best expresses the design.

columns: 12rem;display: grid;

Editorial flow or two-dimensional grid

Multicolumn distributes text into anonymous columns. Grid places independent elements in controllable rows, columns, and areas.

Try a two-dimensional structure in the CSS Grid lab

columns: 12rem;display: flex;

Reading fragments or flexible items

Multicolumn continues the same content across columns. Flexbox distributes children that negotiate size and alignment on one axis.

Try an item distribution in the Flexbox lab