reGrid.js

Demo

Toggle the grid on/off at bottom right. Resize your viewport to see the grid shift. reGrid will persist between page loads, provided your browser supports local storage.

How it Works

reGrid assumes a centered fluid grid, computes column widths in percentages, and column gutters by the pixel. You can set the number of columns and the gutter widths you desire between each of your breakpoints.

This page, for example, matches the reGrid default settings for viewports over 768px in width, namely 6 columns, each with a 20px gutter either side. Between 500px and 768px the grid switches to 3 columns, each with a 10px wide gutter either side, and an overall outer margin of 10 pixels. Under 500px it switches to 1 column, no gutter, and a 16px outer margin.

Settings

There are four options you can pass to reGrid. Critical among these is the 'breaks' option. An array of arrays, one for each of your grids, including the maximum screen width, the number of columns, the outer grid horizontal margins, and the grid column gutter widths. The arrays must be in provided in order of increasing screen max-width.

Name	Default
colour (colour name, hex or rgb)	red
opacity (0.00 - 1)	0.08
maxWidth (max width of overall grid, in pixels)	1200
breaks [max-width, no. of columns, grid outer margin, gutter widths]	[[500,1,16,0],[768,3,10,20],[5000,6,0,40]]

Usage

Together with JQuery, include jquery.reGrid.min.js in your page, thusly:

Call reGrid on the body element, like so:

with options: