CSS Columns Generator: Responsive Multi-column Layout

Preview responsive CSS columns with count or width, gaps, rules, heading spans and break behavior, and export escaped HTML without clipping long text.

Enabling local controls…

Multi-column text settings

Column modeRule styleHeading spanParagraph breaksCount (1–8)Optimal width (80–800 px)Gap (0–100 px)Rule width (0–10 px)Rule color (six-digit hex)

Preview text (blank lines separate paragraphs)

At most 20,000 UTF-8 bytes and 100 paragraphs. Preview is plain text; HTML output is escaped. Width is optimal and can shrink in narrow containers. With both, count is a maximum. Inputs stay in page memory.

Native columns preview

Enter text or load a sample, then build.

DOM reading order follows the source: down one column, then the next, not visually across rows. Full text remains without fixed-height clipping. Count mode may be hard to read on narrow screens; try width. Avoid is a fragmentation preference, not a guarantee for oversized content.

How to use this tool

Choose width or count mode and enter paragraphs. Build, inspect narrow-screen reading order and column breaks, then copy the complete CSS and HTML.

When not to use it

Column width is preferred, not a hard minimum. Avoiding breaks does not guarantee oversized content stays unbroken; multi-column text reads down each column.

Read the guide →