What the hell is a grid system?


“The Grid System,” they said. And I was confused. #anotherhipsterbuzzword?

We know what a grid is and what it’s for. But it’s a big mental leap from “school exercise book” to “trendy designr tool”. As always, the hype leads you to believe it’s akin to the rapture – some ground-breaking paradigm that will take weeks to master. But, of course, it’s not.

Pictured above is a humble grid (img sauce) – used to make sure the stuff in your web pages are aligned nicely to each other. Just like the ones in school, it’s a series of evenly spaced lines to use as a guide when doing your thing.

Pre-made grid guides are widely available to use as templates in your design environment:

And there’s a buttload of articles and examples for best good practise, nice practise, interesting practise, aesthetic theory and other stuff:

Again like in school, it’s entirely possible to miss the grid or fubar a design completely. This isn’t a foolproof system that will make your work awesome 5eva – just a starting point for getting stuff to line up.

Yeah, that’s really it.