Your files never leave your device. All processing happens locally in your browser.
How do I create a CSS multi-column layout?
Use the CSS Multi-Column Layout properties. Either set a fixed number of columns with column-count (e.g. column-count: 3), or an ideal minimum width with column-width (e.g. column-width: 14rem) so the browser fits as many as it can. Add column-gap for the space between columns, an optional column-rule (a line drawn in the gap that takes up no space), and break-inside: avoid on child items so cards or figures are not split at a boundary. The CSS Columns Generator builds all of this visually with a live preview, and everything is computed in your browser — nothing is uploaded.
column-count: fixed number of columns; column-width: ideal width, browser fits as many as fit
column-gap sets the space; column-rule draws a line in the gap without taking space
break-inside: avoid keeps items whole; column-span: all makes a heading span every column
column-fill: balance equalises heights (default); auto fills sequentially (Firefox-only in practice)
What is
CSS multi-column layout
CSS multi-column layout (the CSS Multi-Column Layout Module) flows a single continuous stream of content across several columns, balancing their heights automatically — like newspaper columns. You control it with column-count (a fixed number of columns) or column-width (an ideal minimum width the browser packs as many of as will fit), plus column-gap (the space between columns), column-rule (a border-like line painted in the gap that takes up no space), column-fill (balance vs. auto) and column-span (an element that breaks out across all columns). Unlike flexbox or grid it preserves source order and simply reflows text, but you cannot style an individual column box.
No. The generator is 100% client-side — your column settings are just numbers and strings in the page, and the CSS is built locally. Nothing is uploaded, logged or stored on a server, and there is no backend.
The CSS Columns Generator runs entirely in your browser. The sizing mode, count, width, gap, rule, fill and break toggles are React state, and a pure engine turns them into a CSS string on the fly. There is no server, no API call and no tracking; the only optional network use on the page is consent-gated ads. The Download button creates the .css file in memory with a blob URL, so even the file never leaves your device. Close the tab and everything is discarded.
Use column-count when you want a fixed number of columns regardless of screen size, and column-width when you want the layout to be responsive — the browser fits as many columns of at least that width as the container allows, with no media queries.
column-count sets an exact number of columns, so the columns get narrower on small screens, which can hurt readability. column-width sets an IDEAL minimum width; the browser then fits as many columns of at least that width as the container can hold, dropping to fewer (and eventually one) as the space shrinks — this is the responsive-friendly choice and needs no media queries. You can also use both together (the columns shorthand, e.g. columns: 14rem 3), where the count acts as a maximum. Note that column-width is an ideal, not a hard width: the actual width still depends on the container.
Set break-inside: avoid on the element (for example a card, figure or list item). It is the only well-supported break control, so it reliably keeps the element whole instead of splitting it at a column boundary.
Apply break-inside: avoid to any child you do not want split — cards, figures with captions, list items. In a multi-column context this tells the browser to keep the element intact rather than fragment it across a column boundary. It is the most reliable of the fragmentation controls; by contrast break-before/break-after: avoid and the widows/orphans properties are patchy across browsers, so do not rely on them. For a heading you instead want to SPAN every column, use column-span: all, which breaks the flow across all columns and then restarts it.
No. A column box has no concept of background, padding, margin or border, so you cannot style an individual column. You can only style the container and the elements that flow inside it, plus draw a single column-rule line in every gap.
The CSS Multi-Column Layout Module does not expose the individual column boxes as styleable objects — you cannot set a per-column background, padding, margin or border. The container is styleable as a whole, the elements flowing inside it are styleable individually, and column-rule paints one consistent line in each gap (it takes up no space, like a border). If you truly need per-column styling — different backgrounds, independent widths — reach for CSS grid or flexbox instead, which treat each track/child as a real box.
Detailed Explanation
⚙️Methodology
How the CSS Columns Generator Works
A pure engine (cssColumnsEngine.ts) models a multi-column layout as typed state — a sizing mode (fixed column-count, ideal column-width, or both via the columns shorthand), a column-gap (a length in px/rem/em/ch or the normal keyword), an optional column-rule (style, width and colour), a column-fill (balance or auto) with an optional constrained height, and two fragmentation toggles (break-inside: avoid and column-span: all). It serialises these into valid CSS Multi-Column Layout Module declarations plus optional helper child rules, and returns a matching inline style object so the live preview is exactly the CSS you copy. The React page exposes every property via mode buttons, sliders, a colour picker and checkboxes, flows sample content through the generated columns, and lets you copy the whole stylesheet, download a .css file, or copy any single declaration.
Three sizing strategies: column-count, column-width, or the columns shorthand
column-gap length or the normal keyword; a full column-rule (style/width/colour)
column-fill balance vs. auto, with an optional constrained container height
break-inside: avoid and column-span: all emitted as helper rules only when enabled
Pure, deterministic engine — the same settings always emit the same CSS, and the preview matches it exactly
📖How It Works
What CSS Multi-Column Layout Is For
Multi-column layout flows a single continuous stream of content across several columns, balancing their heights automatically — the newspaper effect. It is the only CSS system that can fragment one content stream across multiple columns while preserving source order, which makes it ideal for long-form reading, glossaries, tag clouds and lists. You decide the "how many" with column-count (a fixed number) or column-width (an ideal minimum width the browser packs as many of as fit — the responsive-friendly choice), set the space with column-gap, and optionally draw a column-rule line in the gap. It differs fundamentally from flexbox and grid: those lay out discrete items into tracks you can size and style individually, whereas multicol reflows a continuous flow and does not expose the column boxes as styleable objects.
Flows one continuous content stream across columns, preserving source order
column-count = fixed number; column-width = ideal width, browser fits as many as fit
column-width mode is responsive without media queries
column-rule draws a line in the gap and takes up no space, like a border
Best for long-form text, glossaries, tag clouds — not for discrete card grids (use grid)
📋Use Cases
Balancing, Spanning and Break Control
column-fill: balance (the default) makes the browser equalise column heights; column-fill: auto fills each column to a constrained height before moving on, but in practice only Firefox honours it — other engines balance regardless. To keep an element whole, set break-inside: avoid on it (a card, figure or list item), which stops it being split at a column boundary; this is the most reliably-supported break control. To let a heading or banner break OUT across every column and then restart the flow, use column-span: all — a widely-supported and recommended readability practice, since ending a column on a heading looks odd. The generator emits both helpers as ready-to-paste child rules only when you enable them.
column-fill: balance equalises heights; auto is effectively Firefox-only
break-inside: avoid keeps cards/figures/list items from splitting at a boundary
column-span: all makes a heading span every column, then restarts the flow
break-before/after: avoid and widows/orphans are patchy — do not rely on them
Spanning headings across columns is a recommended UX practice for readability
⚠️Limitations
Honest Limitations of Multi-Column Layout
The core properties are widely supported, but there are genuine caveats. Controlling content BREAKS is the historically flaky part: break-inside: avoid works well, but break-before/after: avoid and CSS widows/orphans are inconsistent across browsers. column-fill: auto is effectively Firefox-only. You CANNOT style an individual column box — a column has no background, padding, margin or border — so per-column styling is impossible (use grid/flexbox for that). column-width defines an IDEAL, not a hard width, so the real width depends on the container and columns snap to an integer count. Layouts can also become hard to read when a column grows taller than the viewport (forcing scroll-up-then-down) or overflows horizontally. Truly responsive layouts still need the width mode or media queries. Newer column-height / column-wrap wrapping features are Chrome-only (145+) as of 2026, so the generator intentionally does not emit them.
break-inside: avoid is the only reliably-supported break control
column-fill: auto is effectively Firefox-only; others balance regardless
You cannot set a per-column background, padding, margin or border
column-width is an ideal — actual width depends on the container
column-height / column-wrap are Chrome-only (145+) as of 2026 and are not emitted
🔒Privacy & Security
Private by Design
Everything happens on the user’s device. The sizing mode, count, width, gap, rule, fill and break toggles are just React state, and a pure engine turns them into a CSS string locally on every change. There is no server, no API call, no upload and no tracking; the only optional network use on the page is consent-gated ads. The generated CSS is copied to the clipboard, downloaded as a plain columns.css file created in-memory with a blob URL, or copied one declaration at a time. The tool works offline once cached, and closing the tab discards all state.
Column settings and CSS generation are entirely in the browser
No server, no API, no upload, no tracking
Download is an in-memory blob URL — the file never leaves the device
Works offline once cached; state is discarded on tab close
Only optional network use on the page is consent-gated ads
CSS multicol vs. grid vs. flexbox for layout
System
Best for
Can you style each track/column?
Multi-column (this tool)
Reflowing one continuous text stream into newspaper columns
No — a column box has no background/padding/border
CSS Grid
Two-dimensional layouts of discrete items with named tracks
Yes — each track and item is a real, styleable box
Flexbox
One-dimensional rows/columns of discrete items
Yes — each flex item is a styleable box
Multi-column with column-width
Responsive text columns without media queries
No — but the browser adds/removes columns to fit
Multicol is unique in fragmenting a single content stream across columns while preserving source order; for card grids or per-item styling, use grid or flexbox. As of July 2026.
