Multi-column layout

멀티 컬럼

Flow text across several newspaper-style columns automatically — a single columns declaration does it.

Also known as: CSS columnsNewspaper columnscolumn-count
···
html
<div class="page">
  <div class="cols" id="cols">
    <p>Design systems turn scattered decisions into shared defaults. A spacing scale, a type ramp, a small set of named colors — none of it is exciting on its own, but together it removes hundreds of tiny arguments before they happen. Consistency compounds quietly over months.</p>
  </div>
  <div class="tag" id="tag">column-count: 1</div>
</div>
css
.page{display:flex;flex-direction:column;align-items:center;gap:10px;width:min(92%,460px)}
.cols{width:100%;height:min(70%,190px);overflow:hidden;column-gap:18px;column-rule:1px solid var(--line);
  transition:column-count .6s}
.cols p{margin:0;font-size:clamp(10px,1.9vmin,12px);line-height:1.55;color:var(--fg)}
.tag{font:700 clamp(9px,1.7vmin,11px)/1 ui-monospace,monospace;color:var(--accent-2);
  background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:4px 8px}
js
const cols = document.getElementById('cols');
const tag = document.getElementById('tag');
const counts = [1, 2, 3, 2];
let i = 0;
setInterval(() => {
  const n = counts[i % counts.length];
  cols.style.columnCount = String(n);
  tag.textContent = 'column-count: ' + n;
  i++;
}, 1700);

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.