960 Grid System

The 960 Grid System is a very light-weight CSS grid framework for constructing your web content based on a grid comprised of a fixed number of columns within a fixed 960px wide layout. There are various column options available but the two most popular are the 12 column and 16 column variants. The 12 column layout consists of 12 column grid has 12 available columns each of 60px width, with a 10px gutter on each side. The 16 column version consists of 16 columns of 40px, again with a 10px gutter on each side. You can see this visually with the following screenshots:

There are some more subtle features that 960gs brings to the table including source ordering which provides SEO benefits, focused functionality as well as solid cross-browser and multi-platform support. This framework was put together by Nathan Smith (twitter: @nathansmith) and you can find more information about it on his website http://960.gs.

Fluid vs Fixed Layout and Why Fluid is Old School

We are often asked the question: "Why do you use a 960px fixed-width layout? why not Fluid?". Let me go over our rationale.

Fluid refers to the ability of a website layout to change width depending on the width of your browser. This was common technique used when the web was young to take advantage of the available screen real estate. This meant in practical terms that people running their displays at 1024x768 could display more than those running at 640x480 and 800x600. With the advancement in displays and the cheap prices of large 22" and 24" displays fluid layouts have quickly become more a hinderance than a help because you don't run your browser full screen anymore. You generally run your browser alongside your mail client, your IM client, iTunes, etc. You find a common size for your browser that accommodates most sites, and you leave it at that width. That width you will generally find is based on the global lowest common denominator when it comes to screen size, and that nowadays is 1024x768px. 99% of big-name websites are fixed-width and fit comfortably in this screen resolution, so even if you don't run at 1024x768px you probably use a browser that is about that size. Well known fluid-width sites such as Amazon or Wikipedia are often used as poster-children for fluid width design, however these sites are very specialized and have huge amounts of data to show, so making use of every available pixel makes sense. This is not the case for the other 99% of websites out there however.

If you are generally browsing with a browser that accommodates 1024px horizontally it's not surprising that a fixed width, 960px width website fits nicely in your browser. Many web design gurus and people of note in the CSS community have discussed the use of grid systems extensively but we feel that 960px is still the optimal size for web design and will remain so for a good few years until higher-density displays become prevalent.

Another reason why fluid layouts are on the demise is that fluid layouts generally break layouts. Now many years ago when the be-all-and end all of web design revolved around using tables, a fluid layout had very strict constraints on how things would move and display when you resized the browser because everything was in a table cell. With modern design using the much more flexible CSS layout methodology, changing the width of a design can have a detrimental effect on your layout because columns change width and height as you change your browser. This makes the whole process of laying out a design much more difficult. Newspapers and magazines are able to achieve a much greater degree of design freedom because they don't have to accommodate the possibility of the page changing size. In fact when you consider that the web is pretty much the ONLY medium where you can physically change the size of the layout you are looking at dynamically, it's not surprising that people think you should take advantage of it. However, just because you can do something doesn't necessarily mean you should.

Lastly, using fixed width allows for some very creative design concepts to be implemented that are simply not possible with fluid widths. You know your working canvas is a fixed 960px wide, so you can use images for backgrounds and headers without having to worry about tiling concerns, also it allows easier and less kb intensive transparency solutions that are beyond the scope of this document.