“Rules are for the guidance of wise men and the obedience of fools.” Thus spake sweary pilot Douglas Bader. Replace ‘rules’ with ‘grids’, and you’ll get the gist of how I approach CSS grid systems.

Mark Boulton has a most excellent introduction to grid systems, and his book Designing for the Web is available free online. However, I do take issue with his logic first, feeling second approach to grids.

In the past couple of years I have tried using a grid from scratch. However, I inevitably create the design until it feels right and then apply a grid retrospectively. Invariably — well, the half dozen times I’ve tried it — there is a grid that fits. And once you have a grid in place, then it’s a breeze to create further pages and add additional elements.

Laurence Wood desktop site
An example of a grid having been applied retrospectively to a design.

Take, for example, a responsive portfolio site I created for the artist Laurence Wood. I created it in Fireworks until it seemed right, and then added a grid using the excellent Grids extension for Fireworks. There is an equivalent extension for Photoshop called GuideGuide. Turns out I was using a 27-column, 24-pixel column width and 12-pixel gutter, and I didn’t even realise it.

So my advice is do what feels right. If that means starting out with a grid, all well and good. But don’t be shy of trusting the inner feeling of something being correct. Heck, you could even do some sketches with a pencil.