Simple Grid

Simple Grid was created for developers who need a barebones grid. Simple Grid works well with 1140px layouts but easily adapts to any size of layout. With fluid columns, Simple Grid is responsive down to mobile.

DownloadGithub

Features

Responsive

Responsive

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

Lightweight

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

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 Columns

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

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

col-1-3

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

col-1-4

col-1-4

col-1-5

col-1-5

col-1-5

col-1-5

col-1-5

col-1-6

col-1-6

col-1-6

col-1-6

col-1-6

col-1-6

col-1-7

col-1-7

col-1-7

col-1-7

col-1-7

col-1-7

col-1-7

col-1-8

col-1-8

col-1-8

col-1-8

col-1-8

col-1-8

col-1-8

col-1-8

col-1-9

col-1-9

col-1-9

col-1-9

col-1-9

col-1-9

col-1-9

col-1-9

col-1-9

1-10

1-10

1-10

1-10

1-10

1-10

1-10

1-10

1-10

1-10

1-11

1-11

1-11

1-11

1-11

1-11

1-11

1-11

1-11

1-11

1-11

1-12

1-12

1-12

1-12

1-12

1-12

1-12

1-12

1-12

1-12

1-12

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>

col-4-12

col-8-12

col-5-12

col-7-12

col-6-12

col-6-12

col-7-12

col-5-12

col-8-12

col-4-12

col-9-12

col-3-12

col-10-12

col-2-12

col-11-12

1-12