Getting Started With CSS Multi-Column Layout

2.5 Multi-Column Browser Support

The multi column layouts looks pretty cool, right? It's definitely very useful in certain scenarios. And it allows you to create layouts that would otherwise be really hard, if not impossible to do, like the Masonry layout that I showed you previously. But what about browser support? Well, actually it's pretty good. You can use the columns property, and pretty much all the browser including iE 10 Plus, as you can see here. The rest of the properties, like for example the breaks, the content breaks, like break before, break after, break inside. Support for those properties is still a bit sketchy. As you can see, it works in the latest version of Safari, but it does have some issues in Firefox, Chrome. So that is not properly supported just yet. But the basic syntax you can use, no problem, and you can even use that as fall back for, for example, flex box or CSS grid layout. So for example, you start with the multi-column layout by setting the columns property. And then you set a display to flex or grid. Then that's gonna remove the column behavior. It's gonna behave like a flex or a grid container. But on browsers that do not support Flexbox or CSS Grid, that multi column layout will remain. So you're basically using that as a fall back, which is really, really nice. So that's it for this course. It was a short introduction to CSS multi-column layout. I hope you found it useful. Let us know if you're using this, if you plan on using it in the future. And thank you very much for watching. I'm Matthew Cordello, and until next time, take care