Skip to content
Convertto

CSS Columns Generator — Newspaper Layouts

Flow text into balanced columns with a rule between them.

CSS columns flow a single block of text into multiple columns without splitting the markup. Sizing by column-width rather than column-count is almost always the better choice: it names an ideal width and lets the browser fit as many columns as there is room for, so the layout is responsive with no media queries at all. Add break-inside: avoid to figures and cards so they are not sliced across a gap, and break-after: avoid to headings so they are not stranded at the foot of a column.

Runs in your browser
Privacy
Runs entirely in your browser — nothing is uploaded
Cost
Free, unlimited, no sign-up

Frequently asked questions

column-count or column-width?

column-width, nearly always. It states the width you want and lets the browser decide how many fit, which makes the layout responsive with no media queries. column-count forces the same number at every screen size, so on a phone you get three unreadable slivers.

Why is my card split across two columns?

Column layout treats the content as one continuous flow and breaks it wherever the column ends. break-inside: avoid on the element tells the browser to move the whole thing to the next column instead.

Should long articles use columns?

Rarely on screen. Columns require the reader to scroll down and then back up for the next one, which print does not have to deal with. They work best for short lists and for actual print stylesheets.

How to use the css multi-column generator

  1. 1Choose the sizing.
  2. 2Set the ideal width.
  3. 3Set the columns.
  4. 4Set the gap.
  5. 5Set the rule width.
  6. 6Pick the rule colour.
  7. 7The result appears immediately — copy or download it.

Embed this tool

Put the working css multi-column generator on your own site. It runs in your visitors' browsers exactly as it does here — free, no account, nothing uploaded.

Share this tool

Related tools

CSS Clamp GeneratorGenerate fluid clamp() values that scale smoothly between two viewport widths.Gradient Text GeneratorFill text with a gradient, a metallic sheen or a chrome effect using background-clip.CSS Text Shadow GeneratorDesign text shadows, outlines and glow effects with a live preview.CSS Grid GeneratorBuild a CSS Grid layout visually and copy the container CSS.CSS Flexbox GeneratorExperiment with flex direction, alignment and wrapping, then copy the CSS.Type Scale GeneratorBuild a modular typographic scale and copy it as CSS custom properties.

Last updated

More css generators