An example website layout using griddle.it

A clean and simple way to align your website layout. No complex grid frameworks necessary.

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.

Take a look at the live demo

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:

viewhttp://griddle.it/960-12-30?color=FF00FF
http://griddle.it/960-12-30?color=f0f
http://griddle.it/960-12-30?color=fuchsia

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

viewhttp://griddle.it/960-12-30?background=papayawhip&color=fuchsia

Similarly, you can set the color of the numbers:

viewhttp://griddle.it/960-12-30?text=firebrick

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:

viewhttp://griddle.it/960-12-30?num=false
http://griddle.it/960-12-30?num=0

Read on for more options