Multi-column layout flows a block of content — usually text — into multiple newspaper-style columns automatically, without manually splitting it into separate elements.
.article {
column-count: 3;
}Instead of a fixed number of columns, this sets an ideal width — the browser fits as many columns of roughly that width as the container allows.
.article {
column-width: 200px;
}.article {
column-count: 3;
column-gap: 32px;
}Draws a line between columns, styled just like border.
.article {
column-rule: 1px solid #ccc;
}Without this, a heading or image can be split awkwardly across two columns.
.article h3, .article img {
break-inside: avoid;
}When to actually reach for this
Multi-column layout suits long-form text (articles, a list of short items) — for arranging distinct UI components, Grid or Flexbox from earlier lessons are almost always the better tool.