CSS Multi-column layout lets you flow text content into multiple columns, just like a newspaper or magazine. The browser automatically breaks the content across columns and you control how many columns and the gaps between them.
Basic Multi-Column Layout
Use column-count to specify how many columns you want. The browser divides
the content evenly across those columns. You can also use column-width to
set a minimum width and let the browser figure out how many columns to create.
.article {
column-count: 3;
}
/* Or use width-based columns */
.article {
column-width: 300px;
}
With column-count, you get exactly that many columns. With
column-width, the browser creates as many columns as will fit, each at
least that wide. The width approach is more responsive by default.
Column Gaps and Rules
column-gap controls the space between columns, and column-rule
adds a visible line between them. The rule works like border — you set width,
style, and color.
.article {
column-count: 3;
column-gap: 40px;
column-rule: 1px solid #ccc;
}
The column-rule does not take up space — it sits in the gap. This is a nice way to visually separate columns without affecting the layout.
Breaking Across Columns
You can control how elements break across columns using break-inside,
break-before, and break-after. This prevents awkward breaks
where an element is split between two columns.
.card {
break-inside: avoid;
}
h3 {
break-after: avoid;
}
break-inside: avoid on images and cards prevents them from being cut in
half at a column boundary. This is essential for making multi-column layouts look clean.