CSS multicol block direction wrapping

Ever since I became an editor of the Multiple-column layout specification I’ve wanted to add the ability to let overflow columns wrap in the block direction, rather than extend out in the inline direction—creating the sort of horizontal scrollbar that almost nobody wants.

And, now we’re doing it. I’m working on the specification (which is in a very draft state right now). There’s also an experimental implementation behind a runtime flag in Chrome Canary, thanks to the work of Morten Stenshorne at Chrome.

If you want to follow along as we pick through the details, keep an eye on the css-multicol-2 tag.

You can also check out the experimental implementation by starting Canary with the MulticolColumnWrapping flag. See Chrome flags for how to do that. This CodePen should then show you a multicol with multiple rows, as in the following screenshot.

A three column layout, each column is 100 pixels tall and new rows of columns are created to hold all of the content.

3 Comments

Rachel Andrew April 5, 2025 Reply

@chriskirknielsen multicol is a totally different model. The content remains in block layout, it’s just fragmented into columns. A column is more like a page than anything else.

Rachel Andrew April 7, 2025 Reply

@amber that depends on what you are doing, if you just want columns like before you can still do that. But if you wanted (for example) a full page of columns, then scroll down to another full page of columns, you’d want this to avoid scrolling up and down to read.

Rachel Andrew April 7, 2025 Reply

@amber We’re not taking away the previous behavior.

Leave a Reply