column-count: 3 tells the browser to split its text into three columns, filling top-to-bottom and moving to the next column once the first is full. column-width instead makes it responsive: "keep each column at least this wide, and add more columns automatically as space allows." Combine both as columns: 200px 3 to set an upper bound (3 columns max) and a lower bound (200px minimum) at once.
Space between columns is column-gap; the divider line is column-rule (same syntax as border). For anything that must not be cut mid-element — an image, a card — add break-inside: avoid so it jumps to the next column whole.
The key difference from Grid or Flexbox is reading order. Multi-column fills top-to-bottom then wraps to the next column, producing a vertical zigzag; Grid's auto-flow instead fills left-to-right. That makes multi-column a good fit for plain text — articles, glossary entries — but a poor one for cards, where the left-right relationship between items actually matters.
When to use
Use it for long-form, "just keep reading" content — articles, FAQs, glossaries. For item-based content like cards or image galleries, reach for Grid or masonry instead.