When should I use column-count vs column-width?

Use column-count when you need a fixed number of columns regardless of screen width. Use column-width when you want responsive columns that adjust their count automatically based on available space. When both are set, the browser will use the columns shorthand: it won't create more columns than column-count, and each column will be at least column-width wide.

How do I span a heading across all columns?

Add column-span: all to the heading element. This generator produces a .span-heading class you can apply to any direct child of the column container. Note that column-span only works on direct children — it is ignored inside floated or overflow-hidden wrappers.

Is CSS multi-column layout well supported?

Yes. column-count, column-width, column-gap, and column-rule have full support in all modern browsers including Chrome, Firefox, Safari, and Edge. column-span: all is also widely supported. The -webkit- prefix for the columns shorthand is no longer required.

CSS Columns Generator

Configure CSS multi-column layout — count, width, gap, rule, span, and break-inside — with live preview and instant CSS output

All processing happens in your browser. No data is sent to any server.

Column Count

auto

Column Width (px)

auto

Column Gap (px)

normal

Rule Style

Rule Width (px)

Rule Color

Column Span

Break Inside

Generated CSS

.container {
  column-count: 3;
  column-gap: 24px;
}

Live Preview

The CSS multi-column layout module provides a straightforward way to flow text across multiple columns, much like a newspaper or magazine. It balances column heights automatically and handles overflow gracefully.

Column rules are drawn between each column inside the gap. They are purely decorative — they do not add width to the layout — so you should set the column gap wide enough to accommodate the rule width and some breathing room on each side.

By setting column-span: all on a heading, you can create a title that stretches across every column, creating a clear visual break in the flow. The browser continues the column layout below the spanning element.

Use break-inside: avoid on figures, code blocks, or cards to prevent the browser from splitting them across columns. This keeps related content together and avoids awkward visual breaks mid-element.

Your blog post looks great on mobile, but on a 1440px monitor the paragraphs stretch to 120+ characters per line — way past the 60–80 character sweet spot for readability. CSS Grid would split the content into columns, but you’d need to manually distribute paragraphs across grid cells. column-count: 2 flows text across columns automatically — like a newspaper — but you’ve never used the property and aren’t sure how column-width interacts with column-count, or how to prevent a code block from splitting across two columns.

Why This Tool (Not Reading the MDN Page)

Multi-column layout has 6 interacting properties (column-count, column-width, columns shorthand, column-gap, column-rule, column-span, break-inside) and the interaction between column-count and column-width isn’t intuitive — when both are set, the browser uses whichever produces fewer columns. This tool lets you configure each property with sliders and dropdowns, see the live result with sample text, and copy the generated CSS. It also generates the .span-heading and .no-break utility classes you’ll need for headings and unbreakable blocks. Everything runs in your browser; no data is sent anywhere.

What Is CSS Multi-Column Layout?

CSS multi-column layout is a module that lets you flow content across multiple columns — similar to how text wraps in a newspaper or magazine. Unlike CSS Grid or Flexbox (which position items explicitly), multi-column layout automatically breaks a single block of text into equal-width columns and reflows it as the content grows.

The layout is controlled by a small set of CSS properties on the container element:

column-count — the exact number of columns
column-width — the minimum width of each column (browser determines the count)
columns — shorthand combining count and width
column-gap — space between columns
column-rule — decorative line drawn between columns (like border shorthand)

Child elements can then use column-span: all to break out and span the full width, and break-inside: avoid to prevent a block from splitting across columns.

How the Generator Works

Configure the sliders and dropdowns on the left; the CSS output and live preview update instantly:

Column Count: Set an explicit number of columns (column-count) or leave it on “auto” so the browser fills the container using Column Width only.
Column Width: Set the minimum column width in pixels (column-width). When both Count and Width are set, the tool outputs the columns shorthand (e.g. columns: 200px 3).
Column Gap: Control white space between columns (column-gap). Choose “normal” (browser default, typically 1em) or a precise pixel value.
Column Rule: Add a decorative divider between columns. Pick the style (solid, dotted, dashed, double, groove, ridge), width in pixels, and color. The tool outputs the column-rule shorthand; the rule occupies no space in the layout.
Column Span: When set to “all”, the generator emits a .span-heading class with column-span: all. Apply this class to a heading or banner inside the column container to stretch it across all columns.
Break Inside: Prevent a block from splitting across a column boundary. The generator emits a .no-break class with your chosen break-inside value — apply it to cards, figures, or code blocks.

When to Use `column-count` vs `column-width`

Property	Best for	Example
`column-count`	Fixed number of columns regardless of viewport	Navigation lists, sidebar widgets
`column-width`	Responsive layouts where the count adjusts automatically	Article body text, blog posts
Both (shorthand)	Cap the maximum columns while maintaining a minimum width	Magazine-style layouts

When you specify both, the browser will never create more columns than column-count, and each column will be at least column-width wide.

Understanding Column Rule

column-rule is a purely decorative property — it sits in the middle of the column gap and does not take up any space. This means the gap width controls the spacing whether or not a rule is visible. To ensure the rule fits, set the column gap to at least double the rule width.

Available rule styles mirror the CSS border-style values:

solid — continuous line
dotted — series of dots
dashed — series of short dashes
double — two parallel lines with space between
groove / ridge — 3D-effect lines (color-dependent)
inset / outset — embossed/debossed appearance (color-dependent)

Column Span and Break Inside

column-span: all

Apply column-span: all to a child element (typically a heading or banner) to stretch it across all columns. The element creates a new block formatting context above and below itself, resuming the normal column flow afterwards. Note that only none and all are valid values — partial spans are not supported in CSS.

break-inside

break-inside controls whether a column break is allowed inside an element. The most useful values:

avoid — prevents any type of break inside the element (column, page, or region)
avoid-column — prevents a column break specifically, while still allowing page breaks
avoid-page — prevents a page break (useful when printing)

Common Use Cases

Long-form article text — set column-count: 2 or column-width: 320px on article body text to improve readability on wide screens by keeping line lengths comfortable.

Vertical navigation lists — flow a long <ul> into multiple columns with column-count: 3 to avoid excessive vertical scrolling.

Card grids with uniform height — multi-column layout automatically balances column heights, making it useful for masonry-like card layouts where card heights vary.

Definition lists and glossaries — flow a long alphabetical list into columns so readers can scan left-to-right without scrolling far down the page.

Print stylesheets — use break-inside: avoid on figures and code blocks to prevent awkward column or page breaks in printed output.

Frequently Asked Questions

Q: What is the difference between CSS columns and CSS Grid? A: CSS multi-column flows text continuously across columns (like a newspaper), while CSS Grid places items in explicit rows and columns you define. Columns are best for reflow-style text content; Grid is better for structured UI layouts.

Q: Why is column-span: all not working inside my layout? A: column-span: all only works on direct children of the column container. If the spanning element is wrapped in a floated, absolutely positioned, or overflow-hidden ancestor, the span will be ignored. Also ensure the container itself has column-count or column-width set.

Q: How do I make columns responsive? A: Use column-width instead of (or in addition to) column-count. Set column-width: 280px and the browser will fit as many columns as the container allows, reflowing automatically as the viewport narrows.

Q: Does column-rule take up space in the layout? A: No. column-rule is purely decorative and is drawn inside the column gap. The gap itself provides the spacing; the rule does not add any extra width.

Q: Can I style individual columns differently? A: Not directly — CSS multi-column does not expose individual columns as selectable elements. To style only the first column, you would typically use :first-child on items you know will appear there, or switch to CSS Grid which gives full control over column placement.

Q: Is multi-column layout well supported? A: Yes. column-count, column-width, column-gap, and column-rule have full support in all modern browsers (Chrome, Firefox, Safari, Edge). column-span: all is also well supported. The -webkit- prefix for columns is no longer required in modern browsers.