CSS Multi-Column Generator
Generate multi-column CSS with column count or width, gaps, rules and span, and see which of the known limitations apply to your case before committing to it.
Last reviewed by the Radiatus Cloud team
Need this done properly for your business?
Radiatus delivers secure cloud, DevOps & compliance engineering.
Columns solve one problem well
A long paragraph across a wide screen produces lines far past the comfortable measure, and multi-column layout fixes that in one declaration without any markup. Setting column-width rather than column-count is the responsive form: the browser fits as many columns of at least that width as the container allows, so the count changes with the space and no media queries are needed.
The reading order problem
Columns flow vertically, so a reader finishes the bottom of column one and returns to the top of column two. On paper that is natural. On a screen taller than the viewport it means scrolling to the bottom of the first column, then scrolling back up to start the second, which is genuinely unpleasant. Columns work on a screen only when the whole block fits without scrolling, which restricts them to short passages rather than articles.
Breaking is the other limitation
Content flows into the next column wherever it happens to reach the bottom, so a heading can be stranded at the foot of a column with its paragraph in the next one, and a figure can be split across the break. break-inside avoid prevents an element being divided, and there is no way to balance columns exactly by content, since the browser balances by height. Anything with structure worth preserving is usually better as a grid.
Related tools
- Color Converter — Convert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
- Accessibility Color Contrast Checker — Check foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
- Typography Scale Generator — Generate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.
- Design Token Generator — Generate design tokens as CSS variables, JSON or platform formats, structured in the layers that make them maintainable.
Frequently Asked Questions
Should I use column-count or column-width?
column-width for responsive layouts: the browser fits as many columns of at least that width as the container allows, so the count adapts without media queries. column-count when the number genuinely matters, such as a fixed print layout.
Why are columns awkward on screen?
Because they flow vertically. If the block is taller than the viewport, the reader scrolls to the bottom of column one and back up to start column two. Columns only work on screen when the whole block fits without scrolling.
How do I stop a heading being stranded?
break-inside: avoid keeps an element whole, and break-after: avoid on a heading keeps it with what follows. Neither offers exact control, since the browser balances columns by height rather than by content.
Can columns have different widths?
No. Multi-column produces equal columns by definition. Unequal columns need a grid, which is usually the better choice anyway for anything with structure.
Do columns work for layout rather than text?
Rarely well. They were designed for continuous text flow, and using them for cards or components gives no control over which item lands where. Grid or flexbox is the right tool for laying out discrete items.
Privacy & Security
Everything runs in your browser; nothing is uploaded.
How to Use
Choose a column setup to generate the CSS and see it applied to sample text.
Disclaimer: This tool is provided "as is" without warranty of any kind. Results are for educational and utility purposes.
Related Tools
Color Converter
DesignConvert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
Accessibility Color Contrast Checker
DesignCheck foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
Typography Scale Generator
DesignGenerate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.