Grid System, The

From Zanecorpwiki

The Grid System, most clearly illustrated on the Grid System website is a web page layout system. There are a number of CSS frameworks that provide re-usable styles for use with a grid layout.

The system divides the horizontal viewing area into a 12 or 16 columns. Each column has a certain about of padding, and in both cases the width is 960 pixels, which is considered an optimal target given current screen sizes and visual appeal.

The style stresses that the vertical be organized into clear bands as well. The system works well across a wide range of sites and aesthetics, and is generally a good starting point which will determine basic layout area and margins, etc.

It's a good style for 'content' sites (or portions thereof), but since it's fundamentally-non-dynamic, I don't think not designed or mean for application GUI's. In those cases, my approach is to set reasonable minimums, but let the interface expand to as much space as the user wants to give it.

12 vs 16 Columns

The real difference between the two is their ability to generate symetric width columns. With 12, you can have 1,2,3,4, and 6 column layouts. With 16, you're limited to 1,2,4, and 8. The 3 column layout is sometimes especially useful, while the 8 column is generally too small but does have specific uses.

This is not to say that the 12 column is better. Indeed, if you have 3 items in a vertical space, but they have different conceptual weightings, then the 16 col version is what you want; perhaps some combination of 6-6-4. This gives less weight to the less important column. It all depends on what you're doing.