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

Leave a Reply

Your email address will not be published. Required fields are marked *

To respond on your own website, enter the URL of your response which should contain a link to this post's permalink URL. Your response will then appear (possibly after moderation) on this page. Want to update or remove your response? Update or delete your post and re-enter your post's URL again. (Find out more about Webmentions.)