Simple Grid

A collection of classes to build grid based layouts with absolute ease. This is the simplest grid system you'll love to use.

Overview

Have a look at this really simple grid and read the markup used to create it.

.span-1

.span-3

.span-1

<div class="grid-6 gutter-10">
	<div class="span-1">.span-1</div>
	<div class="span-3">.span-3</div>
	<div class="span-1">.span-1</div>
	<div class="span-1">.span-1</div>
</div>

Usage

Using only three classes, we were able to create this fairly complex grid. The three classes you'll need to learn are grid-n, gutter-n and span-n.

.grid-n

Every grid starts here. The grid class can range from grid-1 to grid-12. Where n is the number of columns in your grid.

An example grid with 6 columns:

.gutter-n

Columns in a grid can be spaced apart using the gutter-n class. Possible values for n are 10, 20, 30, 40, 50, 60 or 80 pixels.

Example grid with a gutter of 40px:

.span-n

Direct children of your grid can span multiple columns. n can range from 1 to the maximum number of columns in your grid.

Grid children spanning 3, 2 and 1 columns:

Example Grids

1 (100%)

1 (50%)

2 (50%)

1 (33.33%)

2 (33.33%)

3 (33.33%)

1 (25%)

2 (25%)

3 (25%)

4 (25%)