column-fill
Controls how content fills columns in multi-column layout. cfb (balance) distributes evenly; cfa (auto) fills sequentially.
Class List
| Class | CSS | Description |
|---|---|---|
cfb | column-fill: balance | Distributes content evenly between columns (default) |
cfa | column-fill: auto | Fills columns sequentially. Last column may be empty |
Visual Comparison
Compares balance vs auto.
balance (default value) —cfb
Column heights distributed as evenly as possible. Shorter columns have similar height.
auto — cfa
Fills columns sequentially. Only last column may be empty.
Usage Examples
<!-- Even distribution (default) -->
<div class="cw200px cfb cg2rem">
<p>Content is evenly distributed across columns.</p>
<p>Each column maintains similar height.</p>
</div>
<!-- Fill sequentially -->
<div class="cw200px cfa h30rem cg2rem">
<p>Fills columns sequentially from the first.</p>
<p>Height must be fixed for auto effect to appear.</p>
</div>Tips & Notes
balance only differs with fixed height
With auto height, balance is default so no visible difference from cfa. Clear with fixed height.