Grid Systems

Grid systems are ways of visually organising and presenting designs and information using fixed grids. The grids themselves are invisible, but they guide the placement of elements and their influence on the flow of the design can be quite drastic (as opposed if you didn't use a real grid system and just randomly threw some shapes together on a webpage). If you have worked in print with typographic grids, this is similar to that, but here we will apply the grid system to web design!

Some of the basic rules:
 * Everything should be horizontal.
 * No rectangles can extend outside the format.
 * Rectangles can touch but cannot overlap.

If you are very interested in Grid Systems for design in general, I would also recommend that you read more about it in the following books:
 * Grid Systems: Principles of Organizing Type (Kimberly Elam)
 * Grid Systems in Graphic Design / Raster Systeme Fur Die Visuele Gestaltung (Josef Muller-Brockmann)

They are useful references to have when you are working as a designer as well. And I would imagine that those of you who have taken typography classes may have already encountered or heard of these books.

You can see many examples of the grid system at work at this 960 grid site and at the 960 Grid Demo which shows just the grid itself. One reason why 960 is chosen as a number is because it can work well with both 12 columns and 16 columns - or a combination of both. There are very many different grid systems out there that use different width numbers so you can also use others if you are so inclined, but today's example will use the 960 grid.

Pros and cons of grid systems
Some people like it because its easy to start using the 960 grid system, some don't like it because you have to add more stylesheets, and its naming is not very semantic (or meaningful) because you give it names like "grid_7" or "suffix_11" and someone unfamiliar with the system will not understand what it means.

Regarding "semantic" or "meaningful" names for elements - when we talk about HTML5 and things which make the internet better, we often prefer if things are semantic (meaningful) or have labels that make sense, because an internet with structures that arent so opaque and that people can readily understand is also one that we can also make computers better understand so that computers can help do more of the organisation and sorting work for us!

This is also why I often stress that you should name symbols and elements LOGICALLY, even though you are technically free to give them completely ridiculous names.

Basic structure of a 960 grid
For a 960 width layout with 12 columns, you would get grids with widths of:


 * 60px
 * 140px
 * 220px
 * 300px
 * 380px
 * 460px
 * 540px
 * 620px
 * 700px
 * 780px
 * 860px
 * 940px

For a 960 width layout with 16 columns, you would get grids with widths of:


 * 40
 * 100
 * 160
 * 220
 * 280
 * 340
 * 400
 * 460
 * 520
 * 580
 * 640
 * 700
 * 760
 * 820
 * 880
 * 940

Download the package and look at the "code" folder.

Before you start, also download Firebug and GridFox for Firefox. To make your life easier, I want you to view it in Firefox for the duration of this class and to use Firebug to examine items in HTML/CSS. If you have downloaded the new Firefox and installed Firebug, then you will need to go to Tools > Web Developer > Firebug to activate the tool.

Learning how to use grid systems
Take a look at constructyourcss, which you can use as a kind of sandbox for experimenting with Grid systems or understanding how grid systems work.

What grid systems are supposed to do is to help you cut out the tedious math bits so you can just make the layout work, based on your design. However, the main rule is that the elements inherit the formatting, so when you use them you must use the "clear" tag quite often! You will see the implications of this when you play around with it more.

IN THREE SIMPLE STEPS:

1. Assign your page a container name
This will probably look like this:  If you are using a 16 column, then obviously use the container_16.

2. For each element you have on the page, assign grid, prefix, and suffix name
For example look at this chart.




 * grid_? - its grid name is the number of columns it takes up (count the number of columns its supposed to overlap)
 * prefix_? - how many columns to skip in front (because it does not span the entire page width)
 * suffix_? - how many columns to skip at the back (because it does not span the entire page width)

So, can you guess why something might be named "grid_1 prefix_4 suffix_7"? What does this mean in normal terms, and how it would appear on the page?

3. When done with the element, you have to clear the float
You type the following at the end of your div element to clear it:

But what is a float? And why am i clearing it?

You can read more about clearing floats here but to put it simply, all these elements are floating elements in a big container. Their names have assigned them specific properties. And if you do not clear it at the end, the subsequent or next few elements will also inherit these specific properties, so you need to CLEAR them to prevent all the formatting from bleeding over.

Handy Tools and Alternative Grid Systems

 * Gridfox is an interesting plugin that helps show if there are grids in your page.

Other recommended Grid Systems:


 * The Golden Grid
 * The 1KB CSS Grid
 * Blueprint