CSS Columns Generator
Generate multi-column CSS for editorial text layouts.
Multi-column text layouts
CSS multi-column layout flows text into newspaper-style columns automatically, which suits long editorial content, lists, and footers. This generator builds the column CSS — count, gap, and rule — with a live preview so you can see how the text flows.
Multi-column is easy to misconfigure, and a preview shows immediately whether the column count and gap work at your content width. Tune the values and copy the CSS to give long text a more readable, magazine-like structure.
Copy-ready column CSS
column-count and column-gap flow text automatically, so content reflows across columns as the container resizes. Generated in your browser.
Frequently asked questions
What do count, gap, and rule set?
column-count sets the number of columns, column-gap the space between them, and column-rule a divider line drawn in the gap, using the same syntax as a border, such as 1px solid #e2e8f0.
How do I stop an item from splitting across columns?
Add break-inside: avoid to the child elements (cards, list items, figures) so each one stays whole in a single column.
When should I use columns instead of grid?
Use columns for flowing text or masonry-style lists where content fills one column before the next. Use grid when items must line up in rows.
Related tools
Practical utilities for front-end design and implementation work.