Tools Blog

CSS Multi-Column Layout

Generate CSS multi-column layouts with live preview. Configure column count, gap, rule and fill — copy production-ready code instantly.

6 propertiesLive previewCopy CSS instantly

① Set number of columns, gap and width ② Preview the layout live ③ Copy the CSS columns property

Column Configuration

Column Count
3
Column Width
200
Column Gap
2rem
Rule Width (px)
1px
Rule Style
Rule Color
#cccccc
Column Span (h2/h3)
Column Fill
Orphans
2
Widows
2
Preview Text
Container Width: 800px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet consectetur adipisci velit.

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident. Nam libero tempore cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est.

Generated CSS
columns: 3 200px;
column-gap: 2rem;
column-rule: 1px solid #cccccc;
orphans: 2;
widows: 2;

What is CSS Multi-Column Layout?

The CSS multi-column layout module lets you flow text content across multiple columns — like a newspaper or magazine. You control column-count (fixed number) or column-width (minimum column width for fluid layouts), and the browser handles the rest.

The column-gap property sets the space between columns, while column-rule adds a decorative divider line. The column-fill property controls whether columns are balanced (equal height) or filled sequentially. Use orphans and widows to prevent single lines stranded at column breaks.

Multi-column layout is ideal for long-form reading content: articles, legal documents, dictionaries and price lists benefit from the compact presentation and natural reading flow.

Frequently Asked Questions

CSS multi-column layout (columns module) is designed specifically for flowing text content across multiple vertical columns, like a newspaper. Unlike Grid or Flexbox, the browser automatically wraps text between columns — you do not place items manually. Use it when you have long-form text (articles, legal documents, product descriptions) that benefits from shorter line lengths. Use Grid when you need precise two-dimensional control over individual elements.
column-count sets an exact number of columns regardless of container width — the columns will always be equal-width. column-width sets a minimum column width; the browser creates as many columns as fit the container at that minimum. For responsive layouts, column-width is usually better because the number of columns naturally reduces on smaller screens. You can combine both: the browser uses whichever results in fewer columns.
column-fill: balance (the default) distributes content evenly across all columns, making them equal height. Use it for compact blocks of text where you want a uniform appearance. column-fill: auto fills each column from top to bottom before moving to the next — columns may end up different heights. Use auto when the container has a fixed height (e.g., a card) or when you prefer a waterfall effect.
Apply column-span: all to any block element (h2, h3, figure, blockquote) inside the multi-column container. The element will break out of the column flow and stretch across the full width. Note: only column-span: none (default) and column-span: all are valid — there is no column-span: 2. Also, column-span: all only works on direct children of the multicol container, not nested descendants.
Orphans is the minimum number of lines that must remain at the bottom of a column before a break. Widows is the minimum number of lines that must appear at the top of a column after a break. Both default to 2 in most browsers. A single line stranded alone at a column edge creates visual awkwardness and breaks reading flow. Setting orphans: 2; widows: 2 prevents single stranded lines, improving typographic quality — especially for long-form text.
Magazine and newspaper articles: natural reading flow with short line lengths. Legal and contract text: compact presentation of dense content. Dictionary entries and glossaries: two or three columns fit more terms per screen. Price lists and feature comparisons: balanced columns feel structured. Reference documentation: technical docs with narrow columns feel like printed manuals. Avoid multi-column for interactive content (forms, cards with buttons) since tab order follows source order, not visual columns.
CSS multi-column layout has excellent browser support in 2025. column-count, column-width, column-gap and column-rule are supported in all modern browsers including Chrome, Firefox, Safari, Edge and Samsung Internet. column-span: all has full support in Chrome, Firefox and Safari. The columns shorthand is universally supported. You can safely use multi-column layout in production without fallbacks for any browser released after 2015.
Related Articles
CSS 5 min read
px, rem, em, vh: When to Use Each CSS Unit
A practical guide to CSS units: when to use px, rem, em, vh, and vw. Includes an accessibility-first explanation and a quick conversion reference table.

Explore Our Network

ntool.io Free network diagnostics toolkit — ping, traceroute, DNS lookup, port scanner, and more Visit → capops.io Free financial calculators — compound interest, mortgage, retirement planning, investment tools and more Visit →