Grid system in web design

Grid systems are great for positioning the layout of your website, make it one, two, five or even more column and bring some order into the whole design. Grid systems started a long time ago, to be more specific in print and they can also be applied to other mediums, where you need to have a nice composition and order. So today in the internet age, it’s no wonder the grid system has roots in print.

I always start to sketch the layout in Photoshop having the grid in my background almost until the finish of the web design. At last, i change the grid background to the background that fits with CSS and the whole design looks clean.

For beginners, it may be a bit hard to understand this so I suggest starting with a template. The 960px ones are most popular because of the monitor or LCD display resolutions nowadays and because they are easily dividable. You can get a free grid system at http://www.960.gs and not only for Photoshop but also for other software you use. Also, there is a demo and more information on grid systems and web designs.

Here is a short preview of how to properly use a grid system: