![Rachel Andrew](https://web.dev/images/authors/rachelandrew.jpg) Rachel Andrew Technical Writer [GitHub](https://github.com/rachelandrew) [LinkedIn](https://www.linkedin.com/in/rachelandrew) [Mastodon](https://front-end.social/@rachelandrew) [Bluesky](https://bsky.app/profile/rachelandrew.bsky.social) [Homepage](https://rachelandrew.co.uk)

<br />


Published: January 14, 2026

<br />

From Chrome 145, the `column-wrap` and `column-height` properties from the
[multi-column layout level two specification](https://drafts.csswg.org/css-multicol-2/)
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.
<iframe height="400" style="width: 100%;" scrolling="no" title="Multicol level 2: inline overflow" src="https://codepen.io/web-dot-dev/embed/dPXNbgd?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true"> See the Pen &amp;amp;lt;a href="https://codepen.io/web-dot-dev/pen/dPXNbgd"&amp;amp;gt; Multicol level 2: inline overflow&amp;amp;lt;/a&amp;amp;gt; by web.dev (&amp;amp;lt;a href="https://codepen.io/web-dot-dev"&amp;amp;gt;@web-dot-dev&amp;amp;lt;/a&amp;amp;gt;) on &amp;amp;lt;a href="https://codepen.io"&amp;amp;gt;CodePen&amp;amp;lt;/a&amp;amp;gt;. </iframe>

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.
<iframe height="400" style="width: 100%;" scrolling="no" title="Multicol level 2: block direction overflow" src="https://codepen.io/web-dot-dev/embed/YPWNKja?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true"> See the Pen &amp;amp;lt;a href="https://codepen.io/web-dot-dev/pen/YPWNKja"&amp;amp;gt; Multicol level 2: block direction overflow&amp;amp;lt;/a&amp;amp;gt; by web.dev (&amp;amp;lt;a href="https://codepen.io/web-dot-dev"&amp;amp;gt;@web-dot-dev&amp;amp;lt;/a&amp;amp;gt;) on &amp;amp;lt;a href="https://codepen.io"&amp;amp;gt;CodePen&amp;amp;lt;/a&amp;amp;gt;. </iframe>

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](https://developer.chrome.com/blog/gap-decorations),
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.