CSS Layout
Multi-column Layout
Flow long-form content through balanced columns and control how elements break across them. The examples cover automatic column count, preferred column width, column rules, spanning headings, and fragmentation controls.
Multi-column layout fragments one continuous flow of content into adjacent columns. It is designed for reading material, not for arranging independent application panels.
Columns can improve the use of wide space for articles, indexes, and compact reference lists. The browser, however, controls where the content fragments. Authors can request that a figure or heading avoid a break, but an item taller than the available column must still be split or overflow. This topic also connects with Normal Flow and Responsive Layout.
Let the browser create the columns
Example
css
.article {
columns: 18rem 3;
column-gap: 2rem;
column-rule: 1px solid #d8dee9;
}
.article h2 {
column-span: all;
}The shorthand supplies a preferred column width and maximum count. The browser chooses a practical number for the available space.
Control fragmentation
Example
css
.article figure,
.article blockquote {
break-inside: avoid;
}
.article h3 {
break-after: avoid;
}Columns fragment one content flow. They are suitable for articles and reference lists, not for placing unrelated interface panels.
Multi-column Properties
| Property | Purpose | Example |
|---|---|---|
| columns | Sets a preferred column width and count. | columns: 16rem 3 |
| column-gap | Sets space between columns. | column-gap: 2rem |
| column-rule | Draws a rule between columns. | column-rule: 1px solid #ccc |
| break-inside | Controls fragmentation inside an element. | break-inside: avoid |
Complete Example
Run the complete document below in the Try It editor. Resize the preview or interact with the controls where the example calls for it.
Complete runnable example
html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Multi-column Layout example</title>
<style>
* { box-sizing: border-box; }
body {
margin: 0;
padding: 2rem;
font-family: system-ui, sans-serif;
line-height: 1.5;
}
main { max-width: 70rem; margin-inline: auto; }
article, section, aside, form, .card, .panel {
padding: 1rem;
border: 1px solid #cbd5e1;
border-radius: 0.6rem;
}
.article {
columns: 18rem 3;
column-gap: 2rem;
column-rule: 1px solid #d8dee9;
}
.article h2 {
column-span: all;
}
.article figure,
.article blockquote {
break-inside: avoid;
}
.article h3 {
break-after: avoid;
}
</style>
</head>
<body>
<main class="article"><h2>Multi-column article</h2><p>Long-form text can flow through balanced columns. The browser decides where each line and paragraph continues.</p><blockquote>Important quotations can avoid an awkward split.</blockquote><p>Add enough real content before deciding how many columns are comfortable to read.</p></main>
</body>
</html>Browser Support
Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| columns | 50 | 12 | 52 | 9 |
Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8. A partial-support note is included where it changes how the example behaves.
Notes
- Narrow columns can make keyboard and visual reading order awkward on small screens. Test the actual content and collapse to one column when needed.
- Test the example with real content, keyboard input, browser zoom, and the narrowest layout your project supports.
- Use a fallback when the support table shows that one of your required browsers predates the feature.
Conclusion
Use columns for one continuous reading flow, not as a substitute for Grid-based interface layout.
Start with a preferred column width rather than forcing a large count. Check reading order, scrolling distance, zoom, and narrow screens with actual content. If each region needs its own placement and alignment, use Grid instead of fragmenting one flow.