Corporate was designed with a grid that has 12 columns and 11 gutters. Gutters are 30 pixels wide (max). The maximum width that will be occupied by the theme content in Desktop views is 1170 pixels. In mobile views the grid will collapse and all columns will be set to 100%. Resize your browser now to see the Corporate grid in action.

Grid Unit Tests

Twelve

Six
Six

Four
Four
Four

Three
Three
Three
Three

Two
Two
Two
Two
Two
Two

One
One
One
One
One
One
One
One
One
One
One
One

Grid Measurements

Twelve (1170 pixels wide)

Eleven (1072.5 pixels wide)
One

Ten (975 pixels wide)
Two

Nine (877.5 pixels wide)
Three

Eight (780 pixels wide)
Four

Seven (682.5 pixels wide)
Five

Six (585 pixels wide)
Six

Five (487.5 pixels wide)
Seven

Four (390 pixels wide)
Eight

Three (292.5 pixels wide)
Nine

Two (195 pixels wide)
Ten

One (97.5)
Eleven

Twelve

Source Code

If you would like to take advantage of the grid within your own posts or pages, then use the following HTML template as your guide. Simply copy/paste the code into your Text editor, as shown below:

Make sure that you've clicked over to the Text editor in order to add the following grid layouts into your site.
Make sure that you’ve clicked over to the Text editor in order to add the following grid layouts into your site.

Twelve:

[code language=”html”]
<div class="grid">
<div class="row">
<div class="twelve column">
Twelve
</div>
</div>
</div>
[/code]

Sixes:

[code language=”html”]
<div class="grid">
<div class="row">
<div class="six column">
Six
</div>
<div class="six column">
Six
</div>
</div>
</div>
[/code]

Fours:

[code language=”html”]
<div class="grid">
<div class="row">
<div class="four column">
Four
</div>
<div class="four column">
Four
</div>
<div class="four column">
Four
</div>
</div>
</div>
[/code]

Threes:

[code language=”html”]
<div class="grid">
<div class="row">
<div class="three column">
Three
</div>
<div class="three column">
Three
</div>
<div class="three column">
Three
</div>
<div class="three column">
Three
</div>
</div>
</div>
[/code]

Twos:

[code language=”html”]
<div class="grid">
<div class="row">
<div class="two column">
Two
</div>
<div class="two column">
Two
</div>
<div class="two column">
Two
</div>
<div class="two column">
Two
</div>
<div class="two column">
Two
</div>
<div class="two column">
Two
</div>
</div>
</div>
[/code]

Ones:

[code language=”html”]
<div class="grid">
<div class="row">
<div class="one column">
One
</div>
<div class="one column">
One
</div>
<div class="one column">
One
</div>
<div class="one column">
One
</div>
<div class="one column">
One
</div>
<div class="one column">
One
</div>
<div class="one column">
One
</div>
<div class="one column">
One
</div>
<div class="one column">
One
</div>
<div class="one column">
One
</div>
<div class="one column">
One
</div>
<div class="one column">
One
</div>
</div>
</div>
[/code]

Twelve:

[code language=”html”]
<div class="grid">
<div class="row">
<div class="twelve column">
Twelve
</div>
</div>
</div>
[/code]

Eleven and One:

[code language=”html”]
<div class="grid">
<div class="row">
<div class="eleven column">
Eleven
</div>
<div class="one column">
One
</div>
</div>
</div>
[/code]

Ten and Two:

[code language=”html”]
<div class="grid">
<div class="row">
<div class="ten column">
Ten
</div>
<div class="two column">
Two
</div>
</div>
</div>
[/code]

Nine and Three:

[code language=”html”]
<div class="grid">
<div class="row">
<div class="nine column">
Nine
</div>
<div class="three column">
Three
</div>
</div>
</div>
[/code]

Eight and Four:

[code language=”html”]
<div class="grid">
<div class="row">
<div class="eight column">
Eight
</div>
<div class="four column">
Four
</div>
</div>
</div>
[/code]

Seven and Five:

[code language=”html”]
<div class="grid">
<div class="row">
<div class="seven column">
Seven
</div>
<div class="five column">
Five
</div>
</div>
</div>
[/code]

Six and Six:

[code language=”html”]
<div class="grid">
<div class="row">
<div class="six column">
Six
</div>
<div class="six column">
Six
</div>
</div>
</div>
[/code]

Five and Seven:

[code language=”html”]
<div class="grid">
<div class="row">
<div class="five column">
Five
</div>
<div class="seven column">
Seven
</div>
</div>
</div>
[/code]

Four and Eight:

[code language=”html”]
<div class="grid">
<div class="row">
<div class="four column">
Four
</div>
<div class="eight column">
Eight
</div>
</div>
</div>
[/code]

Three and Nine:

[code language=”html”]
<div class="grid">
<div class="row">
<div class="three column">
Three
</div>
<div class="nine column">
Nine
</div>
</div>
</div>
[/code]

Two and Ten:

[code language=”html”]
<div class="grid">
<div class="row">
<div class="two column">
Two
</div>
<div class="ten column">
Ten
</div>
</div>
</div>
[/code]

One and Eleven:

[code language=”html”]
<div class="grid">
<div class="row">
<div class="one column">
One
</div>
<div class="eleven column">
Eleven
</div>
</div>
</div>
[/code]

Twelve:

[code language=”html”]
<div class="grid">
<div class="row">
<div class="twelve column">
Twelve
</div>
</div>
</div>
[/code]