No left menu grid options - Grid System

This page is for demonstrates purposes only. It only shows the various layout options when there is no left menu.

Return to the main grid system page

1

2

3

4

5

6

7

8

1

2

3

4

5

6

7

8

9

10

11

12

Eight grid columns

span-1

span-2

span-3

span-4

span-5

span-6

span-7

span-8

Twelve grid columns

span-1

span-2

span-3

span-4

span-5

span-6

span-7

span-8

span-9

span-10

span-11

span-12

One column

span-8

View code 
<div class="span-8">
   <p>Text here</p>
</div>
<div class="clear"></div>

Two columns

span-7

span-1

span-6

span-2

span-5

span-3

span-4

span-4

span-3

span-5

span-2

span-6

span-1

span-7

View code 
<div class="span-7">
   <p>Text here</p>
</div>
<div class="span-1">
   <p>Text here</p>
</div>
<div class="clear"></div>

Three columns

span-6

span-1

span-1

span-5

span-1

span-2

span-5

span-2

span-1

span-4

span-3

span-1

span-4

span-2

span-2

span-4

span-1

span-3

span-3

span-1

span-4

span-3

span-2

span-3

span-3

span-3

span-2

span-3

span-4

span-1

span-2

span-5

span-1

span-2

span-4

span-2

span-2

span-3

span-3

span-2

span-2

span-4

span-2

span-1

span-5

span-1

span-6

span-1

span-1

span-5

span-2

span-1

span-4

span-3

span-1

span-3

span-4

span-1

span-2

span-5

span-1

span-1

span-6

Four columns

span-5

span-1

span-1

span-1

span-4

span-2

span-1

span-1

span-4

span-1

span-2

span-1

span-4

span-1

span-1

span-2

span-3

span-1

span-1

span-3

span-3

span-1

span-2

span-2

span-3

span-1

span-3

span-1

span-3

span-2

span-2

span-1

span-3

span-2

span-1

span-2

span-3

span-3

span-1

span-1

span-2

span-1

span-1

span-4

span-2

span-2

span-1

span-3

span-2

span-3

span-1

span-2

span-2

span-4

span-1

span-1

span-2

span-1

span-4

span-1

span-2

span-2

span-3

span-1

span-2

span-3

span-2

span-1

span-2

span-1

span-3

span-2

span-2

span-1

span-2

span-3

span-1

span-2

span-2

span-3

span-1

span-2

span-3

span-2

span-1

span-3

span-2

span-2

span-1

span-1

span-2

span-4

span-1

span-2

span-1

span-4

span-1

span-1

span-4

span-2

span-1

span-2

span-4

span-1

span-1

span-4

span-1

span-2

span-1

span-4

span-2

span-1

span-1

span-5

span-1

span-1

span-1

span-1

span-5

span-1

span-1

span-1

span-1

span-5

Five columns

span-4

span-1

span-1

span-1

span-1

span-1

span-4

span-1

span-1

span-1

span-1

span-1

span-4

span-1

span-1

span-1

span-1

span-1

span-4

span-1

span-1

span-1

span-1

span-1

span-4

span-1

span-1

span-1

span-2

span-3

span-1

span-1

span-1

span-3

span-2

span-1

span-1

span-3

span-1

span-2

span-1

span-1

span-3

span-2

span-1

span-1

span-3

span-1

span-1

span-2

span-1

span-3

span-1

span-2

span-1

span-1

span-3

span-2

span-1

span-1

span-1

span-1

span-2

span-3

span-1

span-1

span-1

span-2

span-1

span-3

span-1

span-2

span-1

span-3

span-1

span-1

span-2

span-1

span-1

span-3

span-2

span-1

span-1

span-1

span-3

span-2

span-1

span-1

span-3

span-1

span-2

span-1

span-3

span-1

span-1

span-2

span-2

span-2

span-1

span-1

span-2

span-1

span-2

span-2

span-1

span-2

span-1

span-1

span-2

span-2

span-2

span-1

span-2

span-1

span-2

span-2

span-3

span-1

span-1

span-1

span-3

span-1

span-1

span-1

span-2

span-3

span-1

span-1

span-2

span-1

span-3

span-1

span-2

span-1

span-1

span-3

span-2

span-1

span-1

span-1

Six columns

span-1

span-1

span-1

span-1

span-1

span-3

span-1

span-1

span-1

span-1

span-3

span-1

span-1

span-1

span-1

span-3

span-1

span-1

span-1

span-1

span-3

span-1

span-1

span-1

span-1

span-3

span-1

span-1

span-1

span-1

span-3

span-1

span-1

span-1

span-1

span-1

Seven columns

span-2

span-1

span-1

span-1

span-1

span-1

span-1

span-1

span-2

span-1

span-1

span-1

span-1

span-1

span-1

span-1

span-2

span-1

span-1

span-1

span-1

span-1

span-1

span-1

span-2

span-1

span-1

span-1

span-1

span-1

span-1

span-1

span-2

span-1

span-1

span-1

span-1

span-1

span-1

span-1

span-2

span-1

span-1

span-1

span-1

span-1

span-1

span-1

span-2

Eight columns

span-1

span-1

span-1

span-1

span-1

span-1

span-1

span-1

Nine to twelve columns

For complex or alternate layouts, you can call in a grid 12 within the content area. Although the default grid system will likely meet the majority of your needs, this alternate grid version is available and can be easily activated. The grid 12 can be called in anywhere on the page by opening a <div class="grid-12"> container:

span-6

span-6

View code 
<div class="grid-12">
   <div class="span-6">
      <p>Text here</p>
   </div>
   <div class="span-6">
      <p>Text here</p>
   </div>
   <div class="clear"></div>
</div>

The width of the grid cells are smaller within the <div class="grid-12"> container. A <div class="span-1"> in the grid 12 is much smaller than in the default grid system. This resizing happens automatically when cells are inside the <div class="grid-12"> container.

span-12

span-11

span-1

span-10

span-2

span-9

span-3

span-8

span-4

span-7

span-5

span-6

span-6

span-5

span-7

span-4

span-8

span-3

span-9

span-2

span-10

span-1

span-11

span-12