CSS multicol block direction wrapping



This content originally appeared on Rachel Andrew and was authored by rachelandrew

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.


This content originally appeared on Rachel Andrew and was authored by rachelandrew