CSS Multiple Columns
The CSS columns properties flow text into newspaper-style columns. They're separate from CSS Grid — purely for splitting long content into readable widths.
The properties
| Property | Purpose | Example |
|---|---|---|
column-count | Fixed number of columns. | 3 |
column-width | Ideal column width — browser picks the count. | 260px |
columns | Shorthand for both. | 260px 3 |
column-gap | Space between columns. | 2rem |
column-rule | Vertical divider line — same syntax as border. | 1px solid #ddd |
break-inside: avoid | Don't split this element across columns. | — |
A two-up text block
CSS
.article {
columns: 2 320px;
column-gap: 28px;
column-rule: 1px solid #eee;
}
.article h2 { break-after: avoid; } /* keep heading with its paragraph */
.article figure { break-inside: avoid; }
Tip:
column-width auto-responsive: the browser drops to one column on narrow screens. No media query needed.Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Verdana, sans-serif; }
.box { background: #04AA6D; color: #fff; padding: 20px; border-radius: 6px; }
</style>
</head>
<body>
<h1>CSS Multiple Columns</h1>
<div class="box">Edit the CSS on the left, then click Run »</div>
</body>
</html>
Try it Yourself »
Exercise
Lay out the article into ideal 320px columns.
.article {
: 2 320px; }
The shorthand property name.
Discussion
Loading…