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;

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.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s