v145 · CSS · Balance Playground

Balance playground

Drive column-wrap, column-fill, and column-height together and watch how the same paragraph reflows. Tells you which combinations create new columns vs. extend the block vertically.

controls

column-wrap: auto; column-fill: auto; column-count: 3;

The new column-wrap CSS property lets multicolumn layouts decide whether to add new columns when content overflows, or keep stacking vertically inside the fixed count of columns.

When column-wrap: no-wrap, the browser refuses to add columns past column-count — text grows past the box. Useful for newspaper-style strict layouts.

When column-wrap: balance, the browser fills all columns as evenly as possible without exceeding column-height — useful for sidebars.

When combined with column-fill: balance-all, every column (including the last) shares content equally, even when the parent is not yet full.

Without column-wrap, browsers default to adding new columns when the container has a height constraint and content overflows.

The interaction with intrinsic sizing is subtle: with height: auto, the parent grows to fit and the property has little effect; with a constrained height, the differences pop.

code

.layout {
  column-count: 3;
  column-wrap: balance;     /* NEW — Chrome 145 */
  column-fill: balance-all; /* fill all columns evenly */
  height: 240px;            /* constrains how much can fit */
}

see also