Knowledge Base Overview

If you are a web designer you will probably use it in your web designs or at least have heard about the 960-grid for (Cascading Style Sheets) CSS in web design.

Some of you might wonder: "Why do we have a 960 grid?" Why not a 850, 900, 950 or 1000 grid system? What is so special or unique about this number 960 versus all the other dimensions that it seems everybody is using it?

It is a binary world

The secret lies in the fact that a web page is a computer generated page and that means binary code. More importantly it is about the pixels with one pixel as the smallest unit.

What is binary again, you ask?

In simple terms and to stay focused on our question and problem at hand we keep it simple. Binary means we have always a multiplication of 2 (two) beginning with 1 (one). Look at this:

1 - 2 - 4 - 8 - 16 - 32 - 64

32 + 64 = 96 * 10 = 960

I think you already know where this is going.

The nice thing about this is that the numbers in this sequence when divided always end up in 10 (ten). You can have a grid with a lot of segments that will nicely fit and work with the pixels in web page.

It begins and ends with 1 pixel

So, this is the real great thing about the 960 grid. We take either two or three columns as the starting grid, i.e. [320+640] or [3 x 320]. Then we can split these columns in two and go on until we end up at ten pixel (or actually 5 pixels)—because it all begins with one unit of 10 pixels. Whatever we do we have an even distribution in 10 pixel steps.

Even better, of course, would be a 1280 pixels grid but this would be too big for the real estate of most monitors. When a monitor has more pixels in width it usually is also bigger in inches and the user prefers to make the browser (viewport) smaller.