CSS - Multi Column

Overview

Quick links: Exercises • Checks • Print as PDF

Estimated time: 10–15 minutes

Multi-column layout flows content vertically then across, mimicking print-like layouts for long text.

Learning Objectives

• Use column-count and column-width to define columns.
• Style gutters with column-gap and column-rule.

Details & Examples

.article{ column-count: 2; column-gap: 1.5rem; }
.notes{ column-width: 18rem; column-rule: 1px solid var(--border); }

Try it

Checks for Understanding

1. Which property sets a minimum column width and lets the browser decide the count?

Exercises

1. Flow a long article into 2 columns with a rule between columns.
2. Switch from fixed column-count to column-width and compare behavior.