Just because everything in CSS is a box doesn’t mean that everything has to look like a box.Manhole

The fact is that the CSS box model lends itself to grid-based designs. Consistent, and with a legacy of strong support from the print world, grids are the design foundation of millions of pieces of work. But grids can also be limiting: when every other website is a two or three-column design rendered in primary colours, it can be hard to make yours stand out.

A common reaction is to break out of the grid: to deliberately set elements off-kilter. This is harder than it appears: the process is never random, and involves as much (if not more) design consideration as any grid-based method.

It is my intention to show the design and development process for a non-grid website in several instalments over the next few months. From a practical standpoint, the techniques used to create non-rectangular web page designs might be summarized as follows: