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:
Licensing
MIT and GPL.
ToDo
- Toggle grid via keyboard
- Explore more layout options based on feedback
- Add to GitHub
reGrid is new (as of February 2015) so you may stumble on some issues here and there.
Please tweet me with any issues or ideas - I will do my best to look into it. Cheers!