CSS Columns Generator

Create multi-column text layouts with the CSS columns property.

Presets:

Columns

Gap (px)

Rule width

Rule style

Rule color

Columns: 3Gap: 24pxRule: 1px solidOutput Size: 66 B

Live preview

CSS multi-column layout flows a single block of text across several columns, like a newspaper. The browser balances the content automatically, so you only declare how many columns you want and how they should be spaced. It is ideal for long lists and dense reading material on wide screens.

CSS

column-count: 3;
column-gap: 24px;
column-rule: 1px solid #cbd5e1;

Multi-column layouts in CSS

The CSS column-count and column-gap properties flow ordinary text into balanced newspaper-style columns with no extra markup. Add a column-rule for a divider line between them. It's perfect for long lists, glossaries, and dense reading on wide screens; pair it with a media query to drop back to one column on mobile. Generated locally in your browser.

Built and maintained by Meet Shah · Last updated 19 July 2026

What this tool is used for

Laying out a long block of text in newspaper columns.
Producing a responsive column count that adapts to width.
Adding a rule between columns without extra markup.
Comparing a fixed count against a fixed column width.
Building a multi-column list without grid or flex.

Frequently Asked Questions

What does CSS multi-column layout do?: It flows a single block of content into newspaper-style columns, filling the first before the second. That is the key difference from grid or flexbox, where you place items into tracks — here the content is one stream and the browser breaks it.
Should I set column-count or column-width?: `column-width` in most cases: it is a MINIMUM, so the browser fits as many columns as will hold that width and reflows naturally on a narrow screen. `column-count` fixes the number, which produces unreadably narrow columns on a phone unless a media query intervenes.
How do I stop an element being split across a column break?: `break-inside: avoid` on the element — essential for a card, a figure or a list item that would otherwise have its heading in one column and its body in the next. Support is good but not perfect, and deeply nested content is where it most often fails.
Why are long columns hard to read?: Because the eye has to travel to the bottom of one column and back to the top of the next. Print manages this with short pages; a tall web column forces vertical scrolling within each one, which is why multi-column works well for short passages and badly for a long article.
What does column-fill control?: Whether content is balanced across columns or fills each to the container height before starting the next. `balance` is the default and usually what looks right; `auto` is only meaningful when the container has a fixed height for the columns to fill against.

Common errors and gotchas

Using columns for anything a reader must scroll, since scrolling down and back up to continue is painful.
Setting a column count that produces very short columns at narrow widths.
Assuming a break can be controlled precisely, when column balancing varies by browser.
Putting interactive elements in columns, where tab order can jump unexpectedly.
Forgetting `break-inside` on cards, which then split across a column boundary.