Just put your dimensions after our URL, and get a background guide to work with in your browser. Grids are created on the fly, so any combination should work.

The Essentials

The basic URL structure to use for all grid shapes and sizes is:

http://griddle.it/[total width]-[number of columns]-[gutter size]

Simply set the URL as the background image on your body element. For example:

/* Generate a 960px grid, with 12 columns and 30px gutter */ body { background: url(http://griddle.it/960-12-30) repeat-y center top; }

Changing Colors

You can change the default colors by adding a parameter after the main URL. Hexidecimal codes, short hexidecimal codes, or any of 140 named colors are all accepted. For example, the following URLs are all valid and equivalent, and change the color of the main grid to bright pink:

By default, the background to the grid is transparent. You can change this if you like by using the 'background' parameter:

Similarly, you can set the color of the numbers:

Hiding the Numbers

By default, each grid displays some guide numbers to help you set your widths. If you want an element to span 3 columns, give it a pixel width of the number shown in column 3. If you want it to span 5 colums, use the number in the fifth column. And so on. If you don't need the numbers anymore, or just find them annoying, turning them off is simple:

Read on for more options →