A clean and simple way to align your website layout.

No complex grid frameworks necessary.

Just put your dimensions after our URL to get a background guide image 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

Here's the basic URL structure to use:

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

Give it a whirl in your CSS:

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

You can personalize your grid layout further by changing the default colors, removing the guide numbers, or including horizontal gridlines.

Read on for more options →

Likey lots? : )

Made by Alex Edwards, as part of my aim to become less of a left-brained programmer and better at website design. Say hi on Twitter or take a peek at some of my recent work: UK Towns List, US Cities List and UK Postcodes List.