Multi-Column Layout
What Is It?
Multi-column layout flows continuous content through newspaper-style columns.
Properties, Tags and Attributes Explained
column-count: Requests a number of columns.column-width: Sets a preferred column width; the browser determines how many fit.column-gap / column-rule: Set the gutter and an optional separator line.column-span: all lets a heading span columns.break-inside: avoid requests that a content box not split across a column break.columns: Shorthand for column-width and column-count; columns: 150px 2 requests a preferred width and a maximum column count.
Each example is a complete HTML page. The CSS is inside the head's style element. Use Try in new tab to edit the CSS or HTML, run your changes, and reset the example.
Example 1: Two reading columns
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multi-Column Layout</title>
<style>
.demo { column-count: 2; column-gap: 24px; column-rule: 1px solid #94a3b8; }
p { margin-top: 0; }
</style>
</head>
<body>
<div class="demo"><p>CSS controls presentation. Start with a small rule and check the browser result.</p><p>Learn spacing before building layouts. Try a different value and compare the result.</p><p>Readable content needs comfortable line lengths and clear headings.</p></div>
</body>
</html>What you see: The paragraphs flow from the first column into the second, with a thin separator.
Example 2: Fluid columns with a heading
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multi-Column Layout</title>
<style>
.demo { columns: 150px; column-gap: 20px; }
h2 { column-span: all; }
p { break-inside: avoid; background: #eff6ff; padding: 12px; }
</style>
</head>
<body>
<div class="demo"><h2>Study notes</h2><p>Read a definition.</p><p>Edit one example.</p><p>Build a small component.</p><p>Explain your choice.</p></div>
</body>
</html>What you see: The heading spans the available columns and each note requests an unbroken box.
Example 3: Choose columns by preferred width
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multi-Column Layout</title>
<style>
.notes { column-width: 140px; column-gap: 16px; }
p { margin-top: 0; }
</style>
</head>
<body>
<div class="notes"><p>Read one definition.</p><p>Run one example.</p><p>Change one value.</p><p>Build a component.</p></div>
</body>
</html>What you see: The browser fits as many columns as appropriate around the preferred width. Use column-width for fluid continuous reading content.
When and Where to Use It
Use columns for continuous editorial content or short lists. Use Grid for independent cards that need row alignment.
Common Mistake or Useful Tip
Avoid tall reading columns that force people to scroll down and back up repeatedly.
Try It Yourself
Switch the fixed count to column-width: 180px and resize.