“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:
- 960 Grid System – templates for Photoshop/Illustrator/many things
- Grid System Generator – generates CSS & HTML for your custom grid
- BlankWork – pre-made SASS file to @import in your CSS
- Modular Grid Pattern – set options, generate template for Photoshop, etc.
And there’s a buttload of articles and examples for best good practise, nice practise, interesting practise, aesthetic theory and other stuff:
- Grid Layouts in Modern Web Design (onextrapixel)
- The Grid Sytem (“the ultimate reference”)
- Designing With Grid-Based Approach (Smashing Magazine)
- The Infinite Grid (A List Apart)
- Grid-Based Design: Six Creative Column Techniques (Smashing Magazine)
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.