6XC

CSS Multi-Column Generator

Flow text into newspaper-style columns — count, gap and divider rule — with live preview and CSS.

783 views

Multi-column layout flows long text side by side like a newspaper page. Change the count and gap and watch this sample reflow instantly. Enable the rule to draw a thin divider between columns. On long articles it shortens line length, which makes reading easier. Multi-column layout flows long text side by side like a newspaper page. Change the count and gap and watch this sample reflow instantly. Enable the rule to draw a thin divider between columns. On long articles it shortens line length, which makes reading easier.

CSS Multi-Column Layout

column-count splits a block's content into equal newspaper columns; column-gap sets the gutter and column-rule draws a divider line (same syntax as border). Text flows automatically from one column to the next — ideal for long articles, footers and index lists. Use break-inside: avoid on children you don't want split across columns.

Frequently Asked Questions

column-count or column-width?

column-count fixes how many columns you get; column-width lets the browser fit as many columns of at least that width as possible — better for responsive layouts. You can set both.

How do I stop an element splitting across columns?

Give it break-inside: avoid; — useful for cards, images with captions and list items.

Similar Tools

CSS Gradient Generator Design linear, radial and conic CSS gradients with live preview and copy the code. Generate CSS Box Shadow Generator Design a box-shadow visually — offsets, blur, spread, color, opacity and inset — with live preview. Generate CSS Border Radius Generator Round each corner individually or all at once, in px or %, with live preview and copyable CSS. Generate CSS Text Shadow Generator Design a text-shadow with offsets, blur, color and opacity — live preview on sample text. Generate