Chrome 145 introduces the column-height and column-wrap CSS multi-column layout properties, enabling us to wrap the additional content into a new row.

CSS-Tricks is a go-to destination for web designers and front-end developers seeking insights into CSS techniques, web design trends, and best practices. Through a rich collection of articles, tutorials, and code snippets, CSS-Tricks equips developers with the knowledge and tools needed to create visually stunning and user-friendly websites. Whether you're looking to master CSS layout techniques, explore responsive design principles, or stay updated with the latest CSS features and browser compatibility issues, CSS-Tricks offers practical guidance and inspiration for elevating your web design skills.

CSS-Tricks

Chrome 145 introduces two new CSS properties — `column-wrap` and `column-height` — that address a long-standing limitation of multi-column layouts: horizontal overflow. With `column-wrap: wrap`, content that exceeds the column height flows into a new row below rather than creating a horizontal scroll, enabling 2D multi-column flows. The post covers practical use cases including fixed-height card grids, newspaper-style layouts, and block-direction carousels using scroll-snap. It also outlines limitations: the properties require known column heights, still need media queries for full responsiveness, and lack the precise alignment control of CSS Grid. A comparison with Grid, Flexbox, and CSS Masonry clarifies when multi-column is the right tool. Browser support is currently Chrome 145+ only.

New CSS Multi-Column Layout Features in Chrome