Generator Tools

CSS Columns Generator

Generate CSS multi-column layout with a live preview. Set column count or width, gap, rule, balance, and spanning headings, plus Tailwind and JSX output.

Quick presets

Controls

Sizing strategy

column-count always shows the same number of columns.

Column count3 columns

Column gap2rem

Gap unit

Column rule (divider line)

Rule width1px

Rule color

Balance column heightscolumn-fill: balance keeps columns close to equal height. Turn off for column-fill: auto, which fills the first column to the container height first.Heading spans all columnsAdds column-span: all to a heading so a title stretches across the full width above the flowing body.Keep items from splittingAdds break-inside: avoid so paragraphs, cards, or list rows are not cut across a column boundary.

Preview only

Container width640px

Font size15px

Font family

CSS selector

The selector that wraps the rule in copy outputs. The spanning heading and non-splitting items use .column-span and .column-item under it.

Live preview

3 fixed columns at 640px

Multi column layout

CSS columns flow one block of content into several side by side columns. The browser decides where each column breaks, so you only declare how many columns you want or how wide each one should be. This makes long passages of text easier to scan, the same way a newspaper or magazine splits a story across the page.

Switch between a fixed column count and an ideal column width on the left. A fixed count always shows the same number of columns, while an ideal width fits as many columns as the container allows and reflows automatically when the screen gets narrower.

Add a column rule to draw a divider line in each gap, balance the column heights, or let a heading span across every column. The live preview uses the same CSS that gets copied below, so the result you see is the result you ship.

The dashed box marks the container. The content flows using the same multi-column CSS that is copied below, so the preview matches the exported rule. Reduce the container width to watch ideal-width columns reflow.

Spanning heading text

Body text (blank line separates paragraphs)

3 paragraphs. Multi-column layout needs enough content to fill more than one column.

CSS

.columns {
  column-count: 3;
  column-gap: 2rem;
  column-rule: 1px solid #cbd5e1;
}

.columns > .column-span {
  column-span: all;
}

.columns > .column-item {
  break-inside: avoid;
}

Pastes into any stylesheet. The multi-column properties are supported in every evergreen browser. The optional rules style a spanning heading and stop items from splitting across columns.

Tailwind utility

columns-3 gap-x-8 [column-rule:1px_solid_#cbd5e1]

Tailwind ships columns-* utilities for column-count and named column widths. Values that do not map to a default use arbitrary [property:value] classes.

JSX / React inline style

style={{
  columnCount: 3,
  columnGap: "2rem",
  columnRule: "1px solid #cbd5e1",
}}

Drop into a React or Next.js element. CSS property names are camelCased and column-count is emitted as a number.

HTML demo

<style>
.columns {
  max-width: 640px;
  font-size: 15px;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  column-count: 3;
  column-gap: 2rem;
  column-rule: 1px solid #cbd5e1;
}
.columns > .column-span {
  column-span: all;
  margin: 0 0 0.75em;
}
.columns > p {
  break-inside: avoid;
  margin: 0 0 1em;
}
</style>
<div class="columns">
  <h2 class="column-span">Multi column layout</h2>
  <p>CSS columns flow one block of content into several side by side columns. The browser decides where each column breaks, so you only declare how many columns you want or how wide each one should be. This makes long passages of text easier to scan, the same way a newspaper or magazine splits a story across the page.</p>
  <p>Switch between a fixed column count and an ideal column width on the left. A fixed count always shows the same number of columns, while an ideal width fits as many columns as the container allows and reflows automatically when the screen gets narrower.</p>
  <p>Add a column rule to draw a divider line in each gap, balance the column heights, or let a heading span across every column. The live preview uses the same CSS that gets copied below, so the result you see is the result you ship.</p>
</div>

Self-contained snippet with the rule, the container, a spanning heading, and your sample paragraphs. Paste straight into a CodePen, JSFiddle, or scratch HTML file.

Notes on CSS multi-column layout

Count vs width: column-count fixes the number of columns; column-width sets an ideal size and lets the browser fit as many as it can. Setting both makes column-count an upper limit on the count produced by column-width.
Balanced by default: column-fill: balance evens out column heights. Switch to auto when the container has a fixed height and you want the first column to fill completely before the next begins.
Spanning elements: column-span: all lifts an element (usually a heading) out of the column flow so it stretches across the full width. Content after it resumes flowing into columns.
Avoiding awkward breaks: break-inside: avoid on items keeps a card, figure, or paragraph together instead of letting it split at a column edge. This is what makes a CSS-columns card stack read like a masonry grid.
The gap and rule: column-gap controls the space between columns and column-rule draws a divider in that space using border-like syntax (width, style, color). A rule does not take up layout space of its own.
Local only: the rule, preview, and sample text live in your browser. Nothing is uploaded to a server.

Current configuration

Sizing: 3 fixed columns
Column gap: 2rem
Column rule: 1px solid
Column fill: balance
Spanning heading: yes
Break inside avoid: yes
Font family: System sans
Container width: 640px
CSS selector: .columns

How to use

Pick a quick preset (Newspaper, Magazine, Responsive, Masonry-style cards, Capped width + count) or start from the defaults.
Choose a sizing strategy: Fixed count for a set number of columns, Ideal width for responsive reflow, or Width + cap to combine both.
Set the column gap, and add a column rule (divider line) with a width, style, and color if you want one.
Toggle balanced column heights, a heading that spans all columns, and break-inside avoid to keep items from splitting.
Edit the heading and body text, then drag Container width to see ideal-width columns reflow in the live preview.
Click Copy CSS for the stylesheet rule, Copy class for the Tailwind utility, Copy style for the JSX inline-style object, or Copy HTML for a self-contained sandbox snippet.

About this tool

CSS Columns Generator builds a multi-column (newspaper or magazine) layout rule and renders a live preview using the exact same properties the tool copies. The CSS multi-column module flows one block of content into several side by side columns automatically: you declare how many columns you want or how wide each should be, and the browser decides where to break, which is what makes it distinct from grid and flexbox. Choose one of three sizing strategies: a fixed column-count that always shows the same number of columns, an ideal column-width that fits as many columns as the container allows and reflows responsively as the screen narrows, or both at once, where column-width sets the ideal size and column-count caps the maximum. Fine-tune the rest of the module with a column-gap in rem, px, or em; a column-rule divider drawn in each gap with width, style (solid, dashed, dotted, double, groove, ridge), and color picked exactly like a border; column-fill set to balance for even column heights or auto to fill the first column first; a column-span: all heading so a title can stretch across every column above the flowing body; and break-inside: avoid on items so paragraphs, figures, or cards are not split across a column boundary, which is how a CSS-columns stack reads like a masonry grid. Four outputs are ready to copy: a CSS block for the container plus optional rules for the spanning heading and non-splitting items, a Tailwind utility string using the built-in columns-* helpers when a value maps and arbitrary [property:value] classes otherwise, a JSX inline-style object with camelCased keys and a numeric column-count, and a self-contained HTML demo with a sized container, a spanning heading, and your sample paragraphs for pasting straight into a CodePen or scratch file. Five quick presets cover the everyday jobs: a three-column newspaper with a rule and headline, a two-column serif magazine spread, a responsive ideal-width layout, a masonry-style card stack, and a capped width-plus-count layout. Edit the heading and body text and drag the container width to watch ideal-width columns reflow in real time. Everything runs locally in your browser. The text, configuration, and generated CSS never leave your device.

Free to use. Works in your browser. No signup, no login.

Related tools

CSS Columns Generator

Multi column layout

How to use

About this tool

You may also like

CSS Grid Generator

CSS Flexbox Generator

CSS Line Clamp Generator

CSS Clamp Generator

Pixels to REM Converter