Gridlock

A tiny, simple and dynamic grid system.

Example

Introduction

Before you run away at the sight of yet another grid system, Gridlock was designed to be diffrent because it puts you as it's focus point and as a result uses plain english class names and a simple structure to create the grids that you want. If you don't like something, change it to your liking and everything will continue to work at the change of a property.

<div class="row">  
    <div class="column-5">This is a column.</div>
    <div class="column-5">This is a column.</div>
</div>  

Providing your class names add up to that of the total columns, you can mix and match any amount of columns and widths you like.

Properties

Name Description Default
gridlock-columns The number of columns to use in the grid 12
gridlock-row-name The name to use for rows row
gridlock-column-name The name to use for columns column
gridlock-puller-name The name to use for pullers push
gridlock-pusher-name The name to use for pullers pull
gridlock-gutter The gutter between columns .5em

Compatibility

Browser Supported
Chrome yes
Firefox yes
Internet Explorer partial (from version 8)
Opera yes

Download