The grid system

The grid system is based on fractions and allows from 1 to 20 columns of regular or irregular sizes.

The number of columns can be changed at any time, by setting the class name.

The grid has 3 break point sizes, these are roughly desktop, tablet and mobile.

The grid's margins and padding are configurable at the same 3 breakpoints above.

The grid elements in this page have an additional set of classes called, panel, inner-panel and outer-panel. The are to set the background colours of the panels. You can skip these if you are creating a simple layout or one that doesn't involve recolouring grid elements.


Set the size for all of the columns within the parent element.

This works well for ecommerce sites as yu only have to set the size of the grid once rather than for every child element.

You can have as many rows as you want within each grid container so there's no need for counting in order to add wrappers around each row.

The dt-..., tb-... and mb-... classes set the sizes for desktops, tablets and mobiles respectively.

<div class="parent dt-1-4 tb-1-10 mb-1-1"> <div>&nbsp;</div> <div>&nbsp;</div> <div>&nbsp;</div> <div>&nbsp;</div> </div>

Overide the grid size for an individual element.

Whether or not you set the grid size at the parent level, you can also set it individually for each child.

<div class="parent dt-1-2 tb-1-2 mb-1-2"> <div class="panel">&nbsp;</div> <div class="panel"> <div class="parent dt-1-2 tb-1-2 mb-1-2"> <div class="inner-panel">&nbsp;</div> <div class="inner-panel">&nbsp;</div> </div> </div> </div>

Nesting grids

It can be very useful to have grids nested within grids. It also helps if you can choose whether these should line up with their parent containers or if they should create their own level.

Invisibly nested grid, when you want your inner grid to line up with the outer grid.

See the nested class in the example below. This alows you to create very complex layouts with multiple levels of nested grids.

<div class="parent dt-1-2 tb-1-2 mb-1-2 nested"> <div>&nbsp;</div> <div> <div class="parent dt-1-2 tb-1-2 mb-1-2"> <div>&nbsp;</div> <div>&nbsp;</div> </div> </div> </div>

Visibly nested grid, when you want your inner grid to be wrapped with a margin.

This is the behaviour I see most commonly in open source grid systems though it makes them less useful for complex layouts.

<div class="parent dt-1-2 tb-1-2 mb-1-2"> <div>&nbsp;</div> <div> <div class="parent dt-1-2 tb-1-2 mb-1-2"> <div>&nbsp;</div> <div>&nbsp;</div> </div> </div> </div>