Skip to main content

The Cheeky Monkey Media Blog

A few words from the apes, monkeys, and various primates that make up the Cheeky Monkey Super Squad.

Introductions to the 960 grid system

Grid systems exist, to make a web designer’s life easier. There are few big one’s on the market these days:

960 Grid image
960 CSS Grid System. This system is based on a page width of 960 pixels, which is a number that’s divisible by many other numbers, making it “a highly flexible base number to work with.”
Blueprint CSS image
Blueprint CSS Grid Framework. Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.
YAML image
YAML, YAML Builder."Yet Another Multicolumn Layout" (YAML) is an (X)HTML/CSS framework for creating modern and flexible floated layouts. The structure is extremely versatile in its programming and absolutely accessible for end users.
YUI Grids image
Yahoo! YUI Grids CSS, Grids Builder.The foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000 page layout combinations

I personally have only used 960 grid system, and only the design half of that. Why? Mostly because of the same prejudices that infect our industry with anything new, things like ”CSS frameworks are bloated pigs and are only for people that don’t know how to code CSS.”

But, I guess I am getting ahead of myself. What exactly is a framework?

Well, in the case of 960, it is a grid, think graph paper if it helps, to base your designs and layouts on. When you visit the 960 website and download the files, one of the folder will contain all the pre-built template files for use in your design application of choice.

The beauty of grid system is that every single element on a web page is in either a square or a rectangle. So they have to fit within the grid. The popularity of these platforms is on the rise, mostly because they allow you to create multi column layouts, quite easily.
I personally love, the look of a site that has been laid out on a grid, all the elements seem to belong. That is why I try to design using a grid system, but until recently I have been a bit too arrogant to try the actual CSS code that goes along with the design templates.

To use the grid css you have to upload another CSS file to the server, so yes this can be another http request depending on how you organize your files or which system you are using. The file size itself is not that big of deal at roughly 8kb, so there goes my argument that this is a bloated pig!

Once you have the CSS files installed, the actual usage is fairly straight forward. Say if you had a two column layout where one column is one-third the width and the other column is two-thirds. You need to assign a class to each column with the number of grid columns each uses. So for a 12 column layout the small column would get this:

  1. 	class="gird_4"
and the larger column would get this

  1. 	class="gird_8"

As you can see not exactly Rocket Science, and without worrying about cross-browser compatibility it is relatively simple ( and amazingly quick) to create a rather complex layout.

Web Development

Would you like to know more about what we do?

View Our Services

Graphic Design Cheeky Monkey

Have a look at some our client work

View Our Work

Cheeky Monkey Discovery

Learn more about Cheeky Monkey Media

About Us