EL framework 960 grid system es un sistema para que las personas que no somos diseñadores web tengamos más facilidades para realizar nuestras webs desde 0.

Para el div contenedor se pueden utilizar las clases container_12 o container_16 para especificar si contendrá 12 o 16 columnas, nosotros haremos los ejemplos con el de 12 en este caso.
Para las capas interiores se usa la clase grid_X, dónde X es el valor de columnas que ocuparán.

Como veremos es muy sencillo realizar la maquetación de nuestra web sin ser un experto, y lo más importante de todo, que siempre se verá igual en todos los navegadores, ese es el punto fuerte del framework 960 grid system.

Los elementos grid_X tienen tanto a la izquierda como a la derecha un margen de 10px.

De la siguiente forma se dividen las 12 columnas:

Los archivos para descargar:

Archivos css 960 grid system

La mejor forma de entenderlo todo es con unos sencillos ejemplos, veamos.

EJemplo 1

Como vemos tenemos una cabecera, una sección en la izquierda, otra en la derecha, la parte central y un footer, eso se consigue de la siguiente forma, muy sencillo.

Ejemplo 2

Aquí como podemos ver tenemos la cabecera, un menú en la izquierda, la parte central y el footer, para no hacer tan largo el tutorial simplemente añadiré los divs necesarios y no todo el html que ya está puesto en el primer ejemplo, veamos:

Ejemplo 3

Este ejemplo nos podría servir para colocar un formulario en el centro de la página, por ejemplo, veamos el código.

Con la clase push podemos empujar las grillas que necesitemos hacia la derecha, en cambio con pull lo hacemos al contrario, hacia la izquierda.

Ejemplo 4

Como podemos ver en este ejemplo estas son los 12 grids de los que disponemos para manejarlos como deseemos.

Ejemplo 5

Como vemos en este sencillo ejemplo con push y pull hemos trasladado el div izquierdo a la derecha y viceversa, todo muy fácil con 960 grid system.

Ejemplo 6

Y finalmente vemos como también con el uso de push hemos empujado el div derecho 6 grillas hacia la derecha dejando 6 grillas libres en el centro.

Y hasta aquí esta breve explicación de como poder empezar a maquetar con este fantástico framework css, sobre todo es necesario hacer la llamada en el head a los archivos tal y como está puesto en el primer ejemplo, un saludo y espero que sea de mucha utilidad.