Column wrapping for multicol

concepts

1. Column Wrap Demo

   Compare column-wrap: nowrap (columns extend past the container, requiring a scroll) versus column-wrap: wrap (columns wrap to a new row, like flex-wrap on a multi-column container).

2. Height-Constrained Columns

   Use column-height to cap each column at a fixed pixel height. When content overflows a column it wraps to the next column row — ideal for card grids, newpaper layouts, and magazine-style designs.

3. Balance Playground

   Drive column-wrap, column-fill, column-count, and column-height together on the same paragraph. Shows which combinations create new column rows and which extend the block.

4. News Layout

   A newspaper-style article rendered with live column-wrap and column-height controls. Toggle wrap mode, change column count, and adjust the height cap — watch the article reflow into multiple column rows in real time.

5. Dashboard Cards

   A data dashboard card grid built with column-wrap + column-height instead of CSS Grid. Adjust the column count and height cap — when cards overflow a column they automatically flow to a new row, with a Grid-vs-multicol comparison.

why it shipped

CSS multi-column layout (Chrome 2+) creates newspaper-style columns in a single column block. But the existing model had no way to control what happens when the total column count exceeds what fits in the container: columns just overflowed invisibly. Authors who wanted columns to wrap onto a new row had to reach for Flexbox or Grid and manually calculate gutters. The Level 2 additions — column-wrap and column-height — bring flexbox-style wrapping to multicol: you can now say "make columns no taller than 400px, and wrap them to a new row when there are too many to fit", creating flowing 2D column grids without JavaScript measurement.

the new properties

/* column-wrap: like flex-wrap for multi-column containers */
.container {
  columns: 3;
  column-wrap: nowrap; /* default — columns overflow if too many */
  column-wrap: wrap;   /* columns wrap to a new row */
}

/* column-height: cap each column at a height */
.container {
  columns: 3;
  column-height: 300px; /* each column is at most 300px tall */
  column-wrap: wrap;    /* wrap when columns fill up */
}

/* Together: newspaper / magazine grid */
.magazine {
  column-count: 4;
  column-height: 400px;
  column-wrap: wrap;
  column-gap: 1.5rem;
}

references

• ChromeStatus entry
• MDN — column-wrap
• CSS Multicol Level 2 spec — column-wrap