HTML5 Series – Columns

I’m not sure I’ve ever needed to add columns where text flows from one into the other, but if your doing Windows 8 development where you would want a sideways scroll rather than vertical this could be quite useful.

To create columns using CSS3 you simply set the columns property to either the number of columns you want or the width each columns should be. e.g. This would produce 4 columns.

<style type="text/css">
        div {
            columns: 4;
        }
</style>

There are a couple other properties that are also quite useful when using columns.

Column-Gap Specifies the size of the gap between columns
Column-Fill Can either be set to auto where columns are filled sequentially and have different lengths, or balance in which case the text will be balanced so each column is even. The default is balance.