Chrome 145 shipped, and it fixes something we have been dodging for years: the forced horizontal scroll in a CSS Multi-column layout. If you have ever put column-count on a container with a fixed height, you know how it goes. The content spills off to the right and you get a horizontal scrollbar that belongs in 2003.
I have talked plenty of clients out of newspaper style layouts because of this one bottleneck. The usual escape route was refactoring into a modern CSS layout built on Grid or Flexbox, even when the content was one continuous stream of text. Chrome’s update changes that math.
Where the horizontal overflow comes from
Multi-column layout has always been one dimensional. It fills columns top to bottom, and when the container runs out of vertical space it keeps adding columns to the right. The naive version looks like this:
.article-container {
column-count: 3;
column-gap: 20px;
height: 400px; /* The trigger for horizontal scroll */
}Once the content needs more room than three 400px columns can hold, Chrome and every other browser generate column 4, then 5, then 6, off to the right. On mobile that is unusable. Readers have to scroll in two directions, which is an accessibility failure on its own.
The fix: column-wrap and column-height
Chrome 145 adds two properties that turn multi-column into a two dimensional flow. column-wrap: wrap lets overflow content drop to a new row below the first set of columns, so the container keeps scrolling vertically.
.modern-article {
column-count: 3;
column-wrap: wrap; /* The magic switch */
height: 400px;
}You are telling the browser to fill three columns, and if there is content left over, start another three below them. The layout stops being a horizontal strip and becomes a vertical block flow.
Where I would actually use it
Pagination is the case I like most here. Set the column height to 100dvh, add column-wrap: wrap, and you get a fluid page-flipping read with no JavaScript at all. Content fragmentation, where a paragraph splits across two pages, is handled natively.
It is not a fix for everything. Content with unbalanced heights, the kind a CSS masonry layout handles better, will still leave you with awkward gaps. Multi-column suits continuous text, not independent UI cards.
If this CSS Multi-column layout work is eating your dev hours, hand it to me. I have been wrestling with WordPress since the 4.x days.
Browser support: the catch
Right now this is Chromium only. Firefox and Safari have not shipped either property. If you ship this to production today, you must pair it with a feature query so the layout does not break for everyone else.
@supports (column-wrap: wrap) {
.article-container {
column-wrap: wrap;
height: 400px;
}
}Print typography has had this kind of flexibility for decades, and the web is closer to it now without giving up vertical scrolling. The immediate win is smaller: no more hacky JS measurements to work out when content has overflowed a container.
