column-width

Sets ideal column width in multi-column layout. Browser auto-determines column count from available space.

Class Patterns

Pattern	Example	CSS
cw{N}px	`cw200px`	column-width: 200px
cw{N}px	`cw150px`	column-width: 150px
cw{N}rem	`cw20rem`	column-width: 20rem
cw{N}rem	`cw30rem`	column-width: 30rem

Visual Demo

The two boxes below hold the same text at the same width. The only difference is the column width value, and the browser decides the column count from it. Resize the window and watch columns appear and merge.

cw200px cg2rem

This is body copy flowing through several columns. Multi-column layout works like print: when the text fills one column it continues in the next. You never state how many columns you want, the container width decides.

That makes responsive multi-column copy possible without a single media query. Keep in mind that long text also grows taller, so decide up front whether to cap the height.

Narrow columns, so a wide viewport splits the text into several of them.

cw25rem cg2rem

That makes responsive multi-column copy possible without a single media query. Keep in mind that long text also grows taller, so decide up front whether to cap the height.

Each column is wide, so the same box holds fewer of them.

Usage Examples

Specify column width and browser auto-calculates count. For newspaper layouts, multi-column text.

<!-- 200px reference auto columns -->
<div class="cw200px cg2rem">
  <p>First paragraph. The browser automatically determines column count based on available space.</p>
  <p>Second paragraph. If the container is wide, it splits into multiple columns.</p>
  <p>Third paragraph.</p>
</div>

<!-- Using rem units -->
<div class="cw25rem cg16px">
  <p>Auto-arranged with 250px reference column width.</p>
</div>

Class Details

`cw200px`column-width: 200px

Sets the column width in pixels. The smaller the value, the more columns fit in the same box. For body copy, aim for a width that fits roughly forty to sixty characters per line.

<!-- Dense list: many narrow columns on wide screens -->
<ul class="cw200px cg2rem">
  <li class="fs14px c71717A">Seoul</li>
  <li class="fs14px c71717A">Busan</li>
  <li class="fs14px c71717A">Incheon</li>
  <li class="fs14px c71717A">Daegu</li>
  <li class="fs14px c71717A">Gwangju</li>
</ul>

`cw25rem`column-width: 25rem

Sets the column width in rem. In this documentation one rem is ten pixels, so twenty-five rem is two hundred and fifty pixels. Because the width scales with the user's font size, it is the safer choice for accessibility.

<!-- Article body: columns grow with the user's font size -->
<div class="cw25rem cg3-2rem crw1px">
  <p class="fs14px c71717A lh1-7">First paragraph of the article.</p>
  <p class="fs14px c71717A lh1-7">It keeps flowing into the next column.</p>
</div>

Practical Example — Announcement Body and Tag List

Long announcement copy flowing across columns with a dense tag list underneath in narrow columns. Same property, very different density depending on the value.

<article class="p3-2rem bg18181B br8px">
  <h2 class="csa fs2-4rem fw700 cFAFAFA mb16px">Service notice</h2>

  <!-- Long copy: wide, readable columns -->
  <div class="cw25rem cg3-2rem mb3-2rem">
    <p class="fs14px c71717A lh1-7 mb16px">Scheduled maintenance runs on Saturday.</p>
    <p class="fs14px c71717A lh1-7">Sessions are preserved and no data is lost.</p>
  </div>

  <!-- Short items: narrow, dense columns -->
  <ul class="cw200px cg2rem">
    <li class="fs13px cA1A1AA">api</li>
    <li class="fs13px cA1A1AA">dashboard</li>
    <li class="fs13px cA1A1AA">billing</li>
    <li class="fs13px cA1A1AA">webhooks</li>
  </ul>
</article>

Tips / Caveats

It is a target width, not a minimum

When the container gets narrower than the value, the columns collapse into one and the width is simply ignored. Never assume a column can never be narrower than what you asked for.

For a fixed column count this is the wrong property

If you need exactly two columns regardless of viewport, reach for column-count. Using both makes the count an upper bound and the width a hint.

Without enough content it looks like nothing happened

Short content fills the first column and stops, so no second column appears. Demos and cards need enough height or enough text before the effect is visible.

Spanning elements must opt in

If a heading or banner should not be trapped inside one column, give that element a column-span class. Without it, it flows like any other block.

Gaps and rules are separate properties

If the columns look cramped, set a column-gap class; if you want a newspaper-style vertical rule between them, set a column rule width class as well.

Ideal width, not minimum

column-width specifies "ideal" width. Narrow containers reduce to one column; wider ones add more.

Use with column-gap

Control column spacing with cg (column-gap) classes.

column-rule-width column-span column-fill column-gap gap