Creating CSS layouts with the 960 Grid System

Put up your hand if you like spending hours creating CSS layouts. Or not…

There are not many aspects of web design that take more time and involve so many frustratingly small calculations than getting everything pixel-perfect in a CSS-based layout. Starting right at the sketches of a design on paper or in Photoshop, there are decisions that have to be made that can affect the CSS code you’ll have to write later. A new system called the 960 Grid System is here to help.

I just stumbled upon the 960 site while looking through del.icio.us/popular one day, and noticed something that jumped out at me right away:

All modern monitors support at least 1024 × 768 pixel resolution. 960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. This makes it a highly flexible base number to work with.

I recently started a couple designs, including this blog, which were designed for 1024 x 768 resolution, however at the time, I arbitrarily chose to have a width of 900 for my design. I wish now, that I had read about the 960 Grid System beforehand. Tonight I downloaded the zip file and opened it up to see what it was all about.

There are 2 variants of the 960 Grid System: A 12-column layout and a 16-column layout. Each variant starts by dividing 960 pixels into either 12 or 16 columns with exactly 10 pixels of padding in between each column. After dividing into small columns, you can then arrange boxes that are multiples of the column widths. It’s sort of hard to explain in words so take a look at the demo page that is set up at 960.gs.

The 960 package includes everything you need to get you started. Begin with a printable PDF that you can use to sketch out your design by hand, divided into either 12 or 16 columns. Once you’ve sketched out your design on paper, you can use a template designed for Photoshop, Fireworks, OmniGraffle or Visio to create your digital design. Finally, once you’ve sliced up your image, you can use the pre-made CSS styles to create your layouts. In your HTML, all you have to do is create a container div and assign a class of either “container_12” or “container_16”. Then you simply use the numbered grid elements along with clearing divs to make layouts. The whole system is pretty simple, and it makes a lot of sense.

Note: I’m not a big fan of the underscores used in the class names, however these days, it’ll be a rare occurrence if a browser chokes on the underscores. For me, it’s just a matter of good code.

I’m very glad to have found this system. I will definitely be using it in the future. I believe that it will be a huge aid for designing layouts and then converting to CSS. No more arbitrary column widths or painful margin, padding and width calculations in CSS. Hoorah!

Leave a Reply

Post Navigation