Overview
A generator for CSS multi-column text layout, the newspaper-style flow. Two sliders set the column count from 1 to 6 and the gap from 8 to 64 pixels, and the tool emits column-count, column-gap and column-rule declarations, with a live paragraph reflowing as you drag. The rule defaults to a 1 pixel solid line using the page border color.
How It Works
Drag the column count slider from 1 to 6 and the gap slider from 8 to 64 pixels. The preview paragraph reflows instantly, showing how text balances across the columns and how the 1 pixel rule draws between them. The code panel shows the three declarations, column-count, column-gap and column-rule with the current values, and clicking the output copies the snippet. The rule string is fixed in the default state to 1px solid var(--border).
Step-by-Step Usage Guide
- Set the column count with the slider.
- Set the gap between columns.
- Watch the preview paragraph reflow and balance.
- Copy the three-declaration snippet.
Technical Specifications & Standards
Multi-column is a fragmentation context, not a grid: content fills the first column to the container height, then the second, so the browser balances columns of a fixed-height box or equalises them when height is auto. That is also the classic gotcha versus flexbox or grid: in multicol, reading order runs down each column then across, whereas grid places items explicitly. The column-rule paints a line in the middle of the gap and, like a border, it never takes layout space, so widening the gap is how you separate the rule from the text. Support is old and universal for the basic properties, since the module has shipped in every engine for over a decade. For control over where breaks happen, pair the output with break-inside: avoid on figures and code blocks, which the tool does not emit but multicol respects.
Targeted Use Cases
- Newspaper-style article layouts for long prose.
- Glossaries and indexes that read naturally in narrow columns.
- Dense changelog or release-note pages that would otherwise run wide.
- Filling wide footer or sidebar text regions gracefully.
Notes & Gotchas
- Keep column counts low for body text; 2 to 3 columns keeps line lengths readable.
- Add break-inside: avoid to figures and lists so they do not split across columns.
- Remember the rule takes no space; enlarge the gap if the rule crowds the text.
- Use multicol for flowing text, and grid or flexbox when items must keep their placement.
Frequently Asked Questions
How is multi-column different from CSS grid?
Multicol is a fragmentation context: content flows down one column and continues into the next, like a newspaper. Grid assigns items to explicit tracks. Use multicol for continuous prose and grid for placed items.
Does the column rule take up space?
No. Like a border, column-rule paints in the middle of the gap without affecting layout. Increase the gap value if the rule sits too close to the text.
Can I change the rule style?
The generated rule is fixed at 1px solid var(--border), reusing the page border variable. Edit the column-rule line after copying to change width, style or color.
Why does the preview balance the columns automatically?
With an auto-height container the browser balances column heights so they end evenly. With a fixed height, content fills column by column and overflows into new columns instead.