Chrome 145 just landed, and it finally addresses a UX nightmare we’ve been dodging for years: the forced horizontal scroll in a CSS Multi-column layout. If you’ve ever tried to use column-count on a container with a fixed height, you know the frustration. The content spills out to the right, creating a horizontal scrollbar that feels like a relic from the early 2000s.
As a pragmatic developer, I’ve spent plenty of time talking clients out of “newspaper style” layouts because of this exact bottleneck. We usually ended up refactoring the whole thing into a complex modern CSS layout using Grid or Flexbox, even when the content was a single continuous stream. But Chrome’s latest update changes the math.
The Problem: Horizontal Overflow Debt
Historically, the CSS Multi-column layout was strictly 1D. It filled columns from top to bottom, and if the container ran out of vertical space, it just kept adding columns to the right. Here is the “naive” approach that used to break everything:
.article-container {
column-count: 3;
column-gap: 20px;
height: 400px; /* The trigger for horizontal scroll */
}When the content exceeds what three 400px columns can hold, Chrome (and every other browser) would simply generate column 4, 5, and 6 to the right. On mobile, this is a total deal-breaker. It forces users to scroll in two directions, which is a massive accessibility fail.
The Fix: column-wrap and column-height
With Chrome 145, we get two new properties that effectively turn multi-column into a 2D flow. Specifically, column-wrap: wrap allows the overflow content to drop to a new “row” below the first set of columns, maintaining vertical scroll behavior.
.modern-article {
column-count: 3;
column-wrap: wrap; /* The magic switch */
height: 400px;
}By using this, you’re essentially telling the browser: “Fill these three columns. If there’s more, start a new set of three columns below them.” It transforms the layout from a horizontal strip into a vertical block flow.
Real-World Use Cases
I’m particularly excited about “pagination” systems. By setting the column height to 100dvh and using column-wrap: wrap, you can create a fluid, vertical page-flipping experience without a single line of JavaScript. This handles content fragmentation—where a paragraph might split between two pages—natively and gracefully.
However, it isn’t a silver bullet. If your content has unbalanced heights (like a CSS masonry layout might handle better), you can still end up with awkward gaps. Multi-column is still best for continuous text, not necessarily for independent UI cards.
Look, if this CSS Multi-column layout stuff is eating up your dev hours, let me handle it. I’ve been wrestling with WordPress since the 4.x days.
Browser Support: The Catch
As of right now, this is a Chromium-only party. Firefox and Safari haven’t shipped these properties yet. If you’re shipping this to production today, you must use a feature query to ensure you don’t break the layout for non-Chrome users.
@supports (column-wrap: wrap) {
.article-container {
column-wrap: wrap;
height: 400px;
}
}This is a major step forward for typography on the web. It brings us closer to the layout flexibility of print design while respecting the vertical-scrolling nature of the modern web. Specifically, it eliminates the need for “hacky” JS calculations to determine when content overflows a container.
