New CSS Multi-Column Format Options in Chrome

Multi-column layouts haven’t been used to their full potential, principally as a result of as soon as content material exceeded a restrict, multi-column would pressure a horizontal scroll. It’s unintuitive and a UX no-no, particularly on the trendy internet the place the default scroll is vertical.

Take the next case for instance:

The CSS code for which may look one thing like this:

physique {
  max-width: 700px;
}

.article {
  column-gap: 10px;
  column-count: 3;
  top: 350px;
}

When the content material measurement exceeds the physique container, multi-column creates further columns and a horizontal scroll. Nonetheless, we lastly have the instruments which have just lately landed in Chrome that “repair” this with out having to resort to trickier options.

Chrome 145 introduces the column-height and column-wrap properties, enabling us to wrap the extra content material into a brand new row beneath, making a vertical scroll as a substitute of a horizontal scroll. 

So, now we will do one thing like this in Chrome 145+:

physique {
  max-width: 700px;
}

.article {
  column-gap: 10px;
  column-count: 3;
  column-wrap: wrap;
  top: 350px;
}

And we get this good multi-column format that maintains the column-count:

This successfully transforms Multi-Column layouts into 2D Flows, serving to us create a extra web-appropriate scroll.

⚠️ Browser Assist: As of April 2026, column-wrap and column-height can be found in Chrome 145+. Firefox, Safari, and Edge don’t but assist these properties.

What this truly solves

The brand new properties may be genuinely helpful in a number of instances:

Fastened-height content material blocks

That is most likely some of the helpful use instances for these properties. If you happen to’re working with content material that has predictable or capped heights, like card grids the place every card has a max-height, then this works fantastically. 

Toggle between column-wrap: wrap and column-wrap: nowrap within the following demo (Chrome 145+ wanted) to verify the distinction.

In case you’re checking this in an unsupported browser, that is the nowrap format:

And that is the wrap format:

Wrapping creates a way more seamless circulation. 

Nonetheless, in case the content-per-card is unbalanced, then even with wrapping, it may well result in unbalanced layouts:

Newspaper-style and Journal-style layouts

One other actual life use case is when designing newspaper-style layouts or sections the place you’re prepared to set specific container and column heights. As may be seen within the earlier instance, the mixture of column-height and column-wrap helps make the format responsive for various display screen sizes, whereas retaining a extra intuitive circulation of knowledge. 

Block-direction carousels

That is my private favourite use case of the column-wrap characteristic! By setting the column top to match the viewport (e.g., 100dvh), you possibly can primarily deal with the multi-column circulation as a pagination system, the place your content material fills the peak of the display screen after which “wraps” vertically. When mixed with scroll-snap-type: y necessary, you get a fluid, vertical page-flipping expertise that handles content material fragmentation with none handbook clipping or JavaScript calculation.

Mess around with the next demo and test it out for your self. Except you’re on Chrome 145+ you’ll get a horizontal scroll as a substitute of the supposed vertical.

There’s a little bit of a downside to this although: If the content material on a slide is simply too lengthy, column-wrap will make it circulation vertically, however the circulation feels interrupted by that imbalance. 

What they don’t remedy

Whereas these properties are genuinely useful, they aren’t one-stop options for all multi-column designs. Listed below are a couple of conditions the place they won’t be the “proper” strategy.

Actually dynamic content material

If the content material top is unknown or unpredictable upfront (e.g., user-generated content material, CMS-driven pages), then these properties are of little use. The design can nonetheless be wrapped vertically with the column-wrap property, nonetheless, the format would stay unpredictable and not using a fastened column top.

It may well result in over-estimating the column top, leaving awkward gaps within the format. Equally, it may well lead you to under-estimate the peak, leading to unbalanced columns. The repair right here is then to make use of JS to calculate heights, which defeats the thought of a CSS-native resolution.

Media-query-free responsiveness

For a very “responsive” format, we nonetheless want to make use of media queries to regulate column-count and column-height for various viewport sizes. Whereas the wrapping helps and creates incremental advantages for a CSS-native resolution, it may well solely assist regulate the overflow conduct. Therefore, the dependency on media question persists when supporting various display screen sizes.

Complicated alignment wants

If you happen to want exact management over the place gadgets sit in relation to one another, CSS Grid continues to be a greater choice. Whereas multi-column with wrapping provides you circulation, it nonetheless lacks positioning management.

Evaluating options

Let’s see how the multi-column strategy compares with current options like CSS Grid, CSS Flexbox, and the evolving CSS Masonry, that provide comparable layouts.

One key distinction is that whereas grid and flexbox handle distinct containers, multi-column is the one system that may fragment a single steady stream of content material throughout a number of columns and rows. This makes it the most effective match for presenting long-form content material, like we noticed within the newspaper format instance.

CSS Grid lets us management placement by way of the grid construction, making it nice for complicated layouts requiring exact positioning or following uneven designs, like dashboards or responsive picture galleries that must auto-fit in keeping with the display screen measurement.

Flexbox with wrapping is nice for creating normal UI elements like navigation bars and tag clouds that ought to wrap round on smaller display screen sizes.

Observe: Chrome can be experimenting with a brand new flex-wrap: steadiness key phrase that might present extra wrapping management as nicely.

CSS Grid and Flexbox with wrapping are each good matches for layouts the place every merchandise is impartial. They work nicely with content material of dynamic heights and supply higher alignment management in comparison with a multi-column strategy. Nonetheless, multi-column with the up to date properties has an edge in the case of fragmentation-aware layouts as we’ve seen.

CSS Masonry, alternatively, shall be helpful for interlocking gadgets with various heights. This makes it excellent for creating type boards (like Pinterest) that pack gadgets with various heights in an environment friendly and aesthetic method. One other good use case is e-commerce web sites that use a masonry grid for product shows as a result of descriptions and pictures can result in differing card heights.

Conclusion

The brand new column-wrap and column-height properties supported in Chrome 145 may considerably enhance the usability of multi-column layouts. By enabling 2D flows, we now have a approach to fragment content material with out dropping the vertical scrolling expertise.

That stated, these options is not going to be a alternative for the structural precision of CSS Grid or the item-based flexibility of Flexbox. However they are going to fill a singular area of interest. As browser assist continues to increase, the easiest way to strategy multi-column format is with an understanding of each its benefits and limitations. They received’t remedy dynamic top points or remove the necessity for media queries, however will permit flowing steady content material in a 2D house.