This article is for front-end web developers and web designers.

DIV based layouts are better in terms of producing cleaner code for your website. However, as a web designer you would know that achieving the design framework with DIVs can be a bit difficult specifically when layout is complex. However, if you use the 960 Grid system, your most defficult web design layouts can be achieved at ease. When you first look at the 960 Grid System files it may be overwhelming and structure might seem too complicated.

However, digging deeper will allow you to see the potential. The grid system CSS means all the hard work done, implementation is easy and helps you achieve the most complex layouts in no time. This article will focus on 960px Grid System, but after reading this web design guide, you will find that all grid systems are similar and easy to apply.

So, what is the grid-based design?

The idea is very old and most basic and widely used in print media. A grid system simplifies the alignment with pre-sized and pre-defined space blocks. You mix and match the blocks to achieve the layout of your choice.

Let’s put it in an easy to understand example. You have 3 blocks, A block = 100px, B block is 200px and the third and biggest C block is 300px. The total canvas area is 300px.

For your first row you simply want to put 3 blocks of even sizes. With grid system you can apply the class of block a to 3 DIVs and thy will arrange in the order you required, 100px each. If you wish to use one wide area under these three blocks, simply apply the div class of block 3 and you will get a wider area.

This was just an example, in real time scenario you would probably use 12 or 16 grid system for complex division of space on your website page.

So, the Grid System will not do anything extra, you will be doing the same job as before but it helps you simplify the website layout implementation. Obviously, it might take a project or two before you get used to it but once your brain adopts the pattern, your job becomes easier.

The biggest advantages of using the grid system are timesaving and a neat layout structure for your website.

If we review the two page layouts illustrated below, you will notice that the first one is fundamentally well structured while the second one seems a bit out of proportion. With use of Grid system, you can be assured that the output will be like the one shown in first image since space division is pre-calculated and becomes effective on your all website pages. The uniform layout is automatically implemented and achieved.

So this explained what is grid system and why we should use it.

The 960 Grid System

The 960 Grid System is a way to easily layout your website design using a 960px wide grid system. It is 960px wide because 960 pixels can be evenly and easily divided and 960px wide website will fit on majority of computer screens.

The 960 Grid System is mainly available in two grid structures: 12 and 16 column grid systems. It is also available pre-configured for 24-column layout if required.

In 12-column layout, the narrowest column is 60px with remaining 11 columns are increased by 80 pixels each. Which means that available column widths are: 60, 140, 220, 300, 380, 460, 540, 620, 700, 780, 860 and 940. In 16-column layout we are adding 4 more columns compared to the 12-column version so per column size reduces with narrowest column sizing at 40 pixels and remaining columns increased by 60 pixels. The column size divisions for the 16 column website layout are: 40, 100, 160, 220, 280, 340, 400, 460, 520, 580, 640, 700, 760, 820, 880 and 940.

CSS Classes

Each column grid has a specific class and to apply a size division of your choice in your website layout, you simply apply the class of that suitable division. The classes are conveniently named based on their width with grid_1 being the class for narrowest width and grid_12 is used for the widest grid (in a 12-column grid system). The convenient naming system makes it very easy to use and re-use the system.

So…

We hope that this article was useful for you in terms of developing a basic understanding about Grid Systems. We will soon publish more articles in this series to discuss Push Me, Pull Me reposition concepts available in 960 Grid Systems.