Published: January 14, 2026
From Chrome 145, the column-wrap and column-height properties from the
multi-column layout level two specification
are supported.
These properties let you wrap columns onto a new row
in the block direction.
Prior to Chrome 145, if the height of the multicol container was restricted, content that didn't fit into the available space would appear as overflow columns in the inline direction. This would create a horizontal scrollbar on the web.
With the column-height and column-wrap properties you can set a height for
the row of columns and set the overflow columns to appear as a new row.
Being able to create new rows of columns provides a route around the current situation, where your choice is between causing people to scroll up and down to read columns, or risk a horizontal scrollbar in situations where there's an unpredictable amount of content.
It also enables patterns such as a block direction carousel, where columns are created that fill the available viewport height. To read the next row of columns you scroll to the next screen in the block direction.
Create a clear reading experience
With multiple rows of columns it would be possible to create an unclear reading experience, where it isn't obvious to the reader that there are multiple rows, and they skip over the gap to continue reading down the column. This is something that should be considered in your UI design. The upcoming ability to add decorations in the row-gap will give you an additional tool to create this visual distinction.
Row rules are coming soon
The multicol level 1 specification includes properties for styling a column-rule; this rule is placed in the gap between columns. Properties for styling row rules are included in the new CSS Gap Decorations specification, which is currently in developer trial. Once this becomes stable, you'll be able to add row and column rules in grid, flexbox, and multicol.