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 |
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>Tips & Notes
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.