Looking at grids for layout

Over the last few days, I have been reading up in more detail on the use of grids for website layout. Using a grid does not mean that your design will look ‘all boxy’ [for example, you can still have curved corner shaped elements] but means that the layout elements on your page are placed according to an accurately measured grid.

In particular, the 960 Grid System looks very interesting and I am hoping to experiment a bit more with this in coming days. The 960 Grid System is a framework for more efficient HTML layout prototyping but there’s no reason why this cannot be used in your websites after the prototyping stage. That’s what I will be doing. The websites shown on the 960 Grid System home page are fantastic examples of the system in use.

Info: The 960 Grid System is a CSS framework that is based on accurate measurement and placements of the main layout elements as defined by specific CSS rules. There are many people that argue that CSS frameworks are bloated and come with lots of stuff that you do not need. However, the 960 Grid System seems more streamlined than that to me.

One of the benefits of using a CSS framework grid system is that it has encouraged me to look more closely at layouts and use the 960 Gridder bookmarklet to overlay a grid on my layouts when they are ‘work in progress’. This has been very useful so far and it’s something I want to continue with. Why not try this yourself!

Further reading: Mark Boulton on Designing Grid Systems · Khoi Vinh on Grid Computing… and Design