Features

Responsive

Built with responsive sites in mind, Simple Grid allows developers to build websites on a foundation suited for mobile and tablet browsers.

Lightweight

Simple Grid is simply that, a grid. This is not a framework with everything from forms to buttons styled but a lightwight simple CSS grid.

1140px

No longer do we develop for 1024px monitors. Simple Grid is designed to make sites look great on larger monitors with higher resolutions.

12 Column

The twelve column structure of Simple Grid easily divides into columns of two, three, four or six, giving developers numerous layout possibilities.

Content Columns

col-1-1

<div class="grid grid-pad">
    <div class="col-1-1">
       <div class="content">
           <h3>col-1-1</h3>
       </div>
    </div>
</div>

col-1-2

<div class="grid grid-pad">
    <div class="col-1-2">
       <div class="content">
           <h3>col-1-2</h3>
       </div>
    </div>
    <div class="col-1-2">
       <div class="content">
           <h3>col-1-2</h3>
       </div>
    </div>
</div>

col-1-3

<div class="grid grid-pad">
    <div class="col-1-3">
       <div class="content">
           <h3>col-1-3</h3>
       </div>
    </div>
    <div class="col-1-3">
       <div class="content">
           <h3>col-1-3</h3>
       </div>
    </div>
    <div class="col-1-3">
       <div class="content">
           <h3>col-1-3</h3>
       </div>
    </div>
</div>

col-1-4

col-1-5

col-1-6

col-1-7

col-1-8

col-1-9

1-10

1-11

1-12

Layout Columns

1-12

col-11-12

<div class="grid grid-pad">
    <div class="col-1-12">
       <div class="content">
           <h3>col-1-12</h3>
       </div>
    </div>
    <div class="col-11-12">
       <div class="content">
           <h3>col-11-12</h3>
       </div>
    </div>
</div>

col-2-12

col-10-12

<div class="grid grid-pad">
    <div class="col-2-12">
       <div class="content">
           <h3>col-2-12</h3>
       </div>
    </div>
    <div class="col-10-12">
       <div class="content">
           <h3>col-10-12</h3>
       </div>
    </div>
</div>

col-3-12

col-9-12

<div class="grid grid-pad">
    <div class="col-3-12">
       <div class="content">
           <h3>col-3-12</h3>
       </div>
    </div>
    <div class="col-9-12">
       <div class="content">
           <h3>col-9-12</h3>
       </div>
    </div>
</div>