v145 · CSS · Multi-column Layout · demo
News Layout
A newspaper-style article rendered with column-wrap and column-height. Toggle between wrap and nowrap, change the column count, and adjust the height cap — and watch the article reflow into multiple column rows or a single overflowing block in real time.
column-wrap and column-height from CSS Multi-column Layout Level 2. In older browsers column-wrap is ignored and columns overflow the container.
Toggle wrap mode · adjust column count · change column height · see the article reflow into rows
Developers working with multi-column CSS layouts have long faced a frustrating limitation: when content exceeded the available columns, the overflow would bleed silently past the container edge, making the text unreadable without a horizontal scroll. That changes in Chrome 145.
The new column-wrap property mirrors the familiar flex-wrap model. Set it to wrap and column blocks now behave like flex rows — once a row of columns is full, new columns start on a fresh row below. The visual result is exactly what designers have been faking with JavaScript for years.
Paired with column-height, which caps each column at a fixed height, the combination unlocks genuinely newspaper-style layout. Set column-count: 3, column-height: 300px, and column-wrap: wrap and a long article distributes itself across three columns per row, with new rows appearing automatically as content grows.
The feature ships fully in Chrome 145 without any origin trial or flag. Authors should add column-wrap: nowrap as the explicit default if they want the pre-145 overflow behavior preserved — omitting the property now has the same effect, but making it explicit is safer as the default may change in future spec iterations.
Browser compatibility is the main caveat: Firefox and Safari have not shipped the Level 2 additions yet. Authors relying on column-wrap for layout should add a @supports guard or fall back to a Flexbox layout for non-Chrome browsers.
The spec work was driven by requests from news and magazine publishing platforms that use CSS columns for article body flow. Previous workarounds involved splitting article content into per-column DOM nodes via JavaScript, which broke text selection and accessibility.
/* CSS Multi-column Level 2 — Chrome 145 */
/* Newspaper-style: columns wrap to a new row when full */
.article {
column-count: 3;
column-height: 300px; /* cap each column at 300px */
column-wrap: wrap; /* wrap to a new row instead of overflowing */
column-gap: 1.5rem;
}
/* Old behaviour: columns overflow container (no wrap) */
.article-legacy {
column-count: 3;
column-wrap: nowrap; /* explicit default */
}
/* Progressive enhancement: guard for non-Chrome */
@supports (column-wrap: wrap) {
.article { column-wrap: wrap; column-height: 300px; }
}