CSS Columns Generator
Generate CSS multi-column layout with column-count or column-width, gap, rule, fill, span, break-inside. Live preview. Free, client-side.
Create multi-column text layouts with full control: column-count (fixed N), column-width (fixed width, responsive count), or both. Column rule styling, column-fill, column-span for headings, break-inside for child elements.
CSS
HTML
How to Use CSS Columns Generator
- Pick layout mode. column-count = fixed N columns (good for headlines, list views). column-width = fixed width per column with responsive count (good for newspaper-style flowing). Both = browser balances (count is max; width is min).
- Set gap (space between columns) and optional column-rule (vertical divider line).
- Pick column-fill. balance (default) makes columns equal height. auto fills columns sequentially (first fills before second starts).
- For headings that should span all columns: set column-span to "all". Generated CSS targets
h1, h2by default. - For child elements (images, code blocks) that shouldn't split across columns: set break-inside to "avoid".
- Copy CSS, copy HTML pattern, or download.
Frequently Asked Questions
How do I control the spacing between columns?
With column-gap, which accepts any length unit (2rem, 40px, and so on). The default in most browsers is 1em, which gets cramped for long text. A good starting point for readable body text is 2 to 3 times the font size. If you also enable a column rule, the rule is drawn in the middle of the gap and does not add width, so widen the gap before adding a rule or the text will feel glued to the line.
column-count vs column-width – which to use?
column-count: “I want exactly N columns, browser figures out widths.” Good for headlines, control-heavy designs. Doesn’t shrink well on mobile (3 narrow columns at 320px is unreadable). column-width: “Each column is at least Wpx; browser uses as many as fit.” Auto-responsive: 1 column on phones, 2-3 on tablets, 4+ on desktop. Common for body text. Both: count as max ceiling, width as min floor. Browser picks the appropriate count for the available space.
What does column-fill do?
balance (default in most browsers): tries to make all columns equal height. auto: fills the first column completely before starting the next. Use auto when you have fixed-height containers (e.g., a sidebar). Use balance for flowing text where equal heights look more polished.
What’s column-span for?
Lets specific elements span across ALL columns instead of staying in one. Common use: headings in a newspaper layout – the H2 spans the full width then content reflows into columns below. Only none and all are valid values; intermediate spans aren’t supported.
How does break-inside work?
Prevents the browser from splitting an element across a column break. break-inside: avoid on an image keeps the whole image in one column rather than top half in column 1 and bottom half in column 2. Apply to figures, code blocks, blockquotes, table rows – anything where mid-element splits look bad.
How are column rules different from borders?
Column rules are vertical dividers BETWEEN columns. They don’t add layout space – the gap is already there, the rule just paints inside it. Borders are around the whole element. Rules use column-rule shorthand (width, style, color, just like border). If gap is too small, the rule may overlap content.
Does multi-column work with grid or flexbox?
They’re independent layout systems. Multi-column flows text; grid/flexbox positions block-level boxes. You can put a multi-column container inside a grid cell, but you can’t make grid items become columns. For card-grid layouts, use CSS Grid. For flowing text, use multi-column.
What about column orphans and widows?
CSS provides orphans and widows (number of lines minimum at column top/bottom) but support is patchy in browsers. The defaults are usually 2 (don’t leave just 1 line at start or end of a column). For perfect typesetting, modern browsers do an OK job; for print-quality layouts you may want a custom layout engine.
Will my columns look the same on mobile?
With column-count: 4, you’ll get 4 narrow columns even on a 320px phone (≈70px each = unreadable). With column-width: 250px, you’ll get 1 column on phone (250+gap > 320), 2-3 on tablet, 4+ on desktop – auto-responsive. Or use media queries to switch column-count by viewport.
Is anything uploaded?
No. The CSS is generated entirely in your browser with JavaScript – nothing is sent to a server, logged, or stored, and the tool keeps working offline once the page has loaded.