Column Layouts

What’s this?

Aligning your content into columns and rows is essential part of creating websites. Our Column layouts are fluid and can be adapted for devices. Check out the examples below.

With Padding

50%
50%

Get code

[row]
[col width="50"]...[/col]
[col width="50"]...[/col]
[/row]

With Gap

50%
50%

Get code

[row padding="0" gaps="1"]
[col width="50"]...[/col]
[col width="50"]...[/col]
[/row]

No Gap, No padding

50%
50%

Get code

[row padding="0" gaps="0"]
[col width="50"]...[/col]
[col width="50"]...[/col]
[/row]

Borders

50%
50%

Get code

[row borderl="1"]
[col width="50"]...[/col]
[col width="50"]...[/col]
[/row]
50%
50%

Get code

[row borderb=”1″ borderl=”1″]
[col width=”50″]…[/col]
[col width=”50″]…[/col]
[/row]

Re-size your browser to see the columns change.

Phone 1 column

Phone 1 column
Phone 1 column

Get code

[row convert="phone-width-100"]
[col width="60"]...[/col]
[col width="40"]...[/col]
[/row]

Phone 2 column

Phone 2 column
Phone 2 column

Get code

[row convert="units-phone-50"]
[col width="60"]...[/col]
[col width="40"]...[/col]
[/row]

Tablet and Phone 1 column

Tablet and Phone 1 column
Tablet and Phone 1 column

Get code

[row convert="mobile-width-100"]
[col width="60"]...[/col]
[col width="40"]...[/col]
[/row]

Tablet and Phone 2 column

Tablet and Phone 2 column
Tablet and Phone 2 column

Get code

[row convert="units-mobile-50"]
[col width="60"]...[/col]
[col width="40"]...[/col]
[/row]

Tablet 2 columns and Phone 1 column

Tablet 2 columns and Phone 1 column
Tablet 2 columns and Phone 1 column

Get code

[row convert="units-tablet-50 phone-width-100"]
[col width="60"]...[/col]
[col width="40"]...[/col]
[/row]

2 columns

50%
50%

Get code

[row padding="0" gaps="1" convert="phone-width-100"]
[col width="50"]...[/col]
[col width="50"]...[/col]
[/row]
60%
40%

Get code

[row padding="0" gaps="1" convert="phone-width-100"]
[col width="60"]...[/col]
[col width="40"]...[/col]
[/row]
70%
30%

Get code

[row padding="0" gaps="1" convert="phone-width-100"]
[col width="70"]...[/col]
[col width="30"]...[/col]
[/row]

3 columns

33%
33%
33%

Get code

[row padding="0" gaps="1" convert="phone-width-100"]
[col width="33"]...[/col]
[col width="33"]...[/col]
[col width="33"]...[/col]
[/row]
50%
25%
25%

Get code

[row padding="0" gaps="1" convert="phone-width-100"]
[col width="50"]...[/col]
[col width="25"]...[/col]
[col width="25"]...[/col]
[/row]
20%
50%
30%

Get code

[row padding="0" gaps="1" convert="phone-width-100"]
[col width="20"]...[/col]
[col width="50"]...[/col]
[col width="30"]...[/col]
[/row]

4 columns

25%
25%
25%
25%

Get code

[row padding="0" gaps="1" convert="phone-width-100"]
[col width="25"]...[/col]
[col width="25"]...[/col]
[col width="25"]...[/col]
[col width="25"]...[/col]
[/row]

4 columns

25%
25%
25%
25%

Get code

[row padding="0" gaps="1" convert="phone-width-100"]
[col width="20"]...[/col]
[col width="30"]...[/col]
[col width="20"]...[/col]
[col width="30"]...[/col]
[/row]
20%
30%
20%
30%

Get code

[row padding="0" gaps="1" convert="phone-width-100"]
[col width="20"]...[/col]
[col width="30"]...[/col]
[col width="20"]...[/col]
[col width="30"]...[/col]
[/row]
40%
20%
20%
20%

Get code

[row padding="0" gaps="1" convert="phone-width-100"]
[col width="40"]...[/col]
[col width="20"]...[/col]
[col width="20"]...[/col]
[col width="20"]...[/col]
[/row]

5 columns

20%
20%
20%
20%
20%

Get code

[row padding="0" gaps="1" convert="phone-width-100"]
[col width="20"]...[/col]
[col width="20"]...[/col]
[col width="20"]...[/col]
[col width="20"]...[/col]
[col width="20"]...[/col]
[/row]
X

Variations

Change the Skin for this Case Study

Case Studies

Design demos for React