The Grid

  1. Home
  2. Entrepreneur Documentation
  3. The Grid

Entrepreneur 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 1440 pixels. In mobile views the grid will collapse and all columns will be set to 100%. Resize your browser now to see the Entrepreneur grid in action.

Grid Unit Tests

Twelve

Six
Six

Four
Four
Four

Three
Three
Three
Three

Two
Two
Two
Two
Two
Two

1
1
1
1
1
1
1
1
1
1
1
1

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:

<div class="grid">
    <div class="row">
        <div class="twelve column">
            Twelve
        </div>
    </div>
</div>

Sixes:

<div class="grid">
    <div class="row">
        <div class="six column">
            Six
        </div>
        <div class="six column">
            Six
        </div>
    </div>
</div>

Fours:

<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>

Threes:

<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>

Twos:

<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>

Ones:

<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>

Twelve:

<div class="grid">
    <div class="row">
        <div class="twelve column">
            Twelve
        </div>
    </div>
</div>

Eleven and One:

<div class="grid">
    <div class="row">
        <div class="eleven column">
            Eleven
        </div>
        <div class="one column">
            One
        </div>
    </div>
</div>

Ten and Two:

<div class="grid">
    <div class="row">
        <div class="ten column">
            Ten
        </div>
        <div class="two column">
            Two
        </div>
    </div>
</div>

Nine and Three:

<div class="grid">
    <div class="row">
        <div class="nine column">
            Nine
        </div>
        <div class="three column">
            Three
        </div>
    </div>
</div>

Eight and Four:

<div class="grid">
    <div class="row">
        <div class="eight column">
            Eight
        </div>
        <div class="four column">
            Four
        </div>
    </div>
</div>

Seven and Five:

<div class="grid">
    <div class="row">
        <div class="seven column">
            Seven
        </div>
        <div class="five column">
            Five
        </div>
    </div>
</div>

Six and Six:

<div class="grid">
    <div class="row">
        <div class="six column">
            Six
        </div>
        <div class="six column">
            Six
        </div>
    </div>
</div>

Five and Seven:

<div class="grid">
    <div class="row">
        <div class="five column">
            Five
        </div>
        <div class="seven column">
            Seven
        </div>
    </div>
</div>

Four and Eight:

<div class="grid">
    <div class="row">
        <div class="four column">
            Four
        </div>
        <div class="eight column">
            Eight
        </div>
    </div>
</div>

Three and Nine:

<div class="grid">
    <div class="row">
        <div class="three column">
            Three
        </div>
        <div class="nine column">
            Nine
        </div>
    </div>
</div>

Two and Ten:

<div class="grid">
    <div class="row">
        <div class="two column">
            Two
        </div>
        <div class="ten column">
            Ten
        </div>
    </div>
</div>

One and Eleven:

<div class="grid">
    <div class="row">
        <div class="one column">
            One
        </div>
        <div class="eleven column">
            Eleven
        </div>
    </div>
</div>

Twelve:

<div class="grid">
    <div class="row">
        <div class="twelve column">
            Twelve
        </div>
    </div>
</div>