v145 · CSS · Column Wrap Demo

Column Wrap Demo

Compare column-wrap: nowrap (the traditional multicol behaviour — all content in one long column row, which may overflow) against column-wrap: wrap (columns wrap to a new row when they fill up, like flex-wrap). Use the slider to add more content items and watch the difference.

Chrome 145 required for column-wrap and column-height. In older browsers column-wrap is ignored and both containers behave like nowrap.

live comparison

8 items

column-wrap: nowrap (default)

Columns extend in one row. If they overflow, they scroll or clip.

column-wrap: wrap (new in Chrome 145)

When columns fill up, they wrap to a second row — like flexbox.

code

/* Traditional multicol — all in one row, may overflow */
.content {
  columns: 3;
  column-gap: 1rem;
  column-wrap: nowrap; /* default */
}

/* New in Chrome 145 — columns wrap to new rows */
.content {
  columns: 3;
  column-gap: 1rem;
  column-height: 14rem; /* cap each column */
  column-wrap: wrap;    /* wrap when a column fills up */
}

/* Like flex-wrap but for multicol:
   - column-height sets the "cross size" of each column
   - column-wrap: wrap creates additional rows as needed
   - column-count controls max columns per row */

see also