Columns enable you to easily sort your content into a column based layout. Creating columns requires the use of two separate shortcodes, the [row] and the [column] shortcode. If you don’t know what shortcodes are we recommend you read our article on How to Use Shortcodes. The parameters of this shortcode are:

There is only one attribute involved which needs to be added to the column shortcode to tell it how wide it should be.

width
Sets the width of a column in units. Should be given as one to twelve.

There are twelve units in each row. This means that whenever you create a row you will need to distrbute 12 units throughout them. In other words you can create one ’12’ width column in a row or two ‘6’ width coliumns, or three ‘4’ width columns. The idea is that the width of all columns in a row should add up to twelve.

You don’t have to use the same widths in a row though. You could create a ‘6’ width column and two ‘3’ width columns. Let’s look at some examples.

Examples

[row]
[column width='6']
This column occupies half of this row.
[/column]
[column width='6']
This column also occupies half of this row
[/column]
[/row]

[row]
[column width=’6′]
This column occupies half of this row.
[/column]
[column width=’6′]
This column also occupies half of this row
[/column]
[/row]

[row]
[column width='4']
This column occupies a third of this row.
[/column]
[column width='4']
This column also occupies a third of this row
[/column]
[column width='4']
All three columns occupy a third of this row
[/column]
[/row]

[row]
[column width=’4′]
This column occupies a third of this row.
[/column]
[column width=’4′]
This column also occupies a third of this row
[/column]
[column width=’4′]
All three columns occupy a third of this row
[/column]
[/row]

[row]
[column width='6']
This column occupies half of this row.
[/column]
[column width='4']
This column occupies a third of this row
[/column]
[column width='2']
This is tiny!
[/column]
[/row]

[row]
[column width=’6′]
This column occupies half of this row.
[/column]
[column width=’4′]
This column occupies a third of this row
[/column]
[column width=’2′]
This is tiny!
[/column]
[/row]