Vamos a realizar una serie de artículos sobre la maquetación de páginas web con 960 Grid System, que nos permitirá implementar nuestros diseños de webs más fácilmente. 960 Grid System es un framework CSS, que no es más que una declaración de estilos que dispone las clases necesarias para implementar columnas en una página web, de diversos tamaños, con las que maquetar nuestros contenidos fácil y ordenadamente.

Nosotros mismos podríamos hacer un sistema propio para maquetar una página con diversas columnas, como hemos visto en diversos artículos del Taller de CSS, pero utilizando un framework como 960 Grid ya tendremos la mayor parte del trabajo realizado, pues simplemente tendremos que colocar a cada contenedor de elementos las clases disponibles en el sistema, para que tenga la anchura y posición deseadas.

Utilizar un framework CSS no aporta nada de creatividad para realizar un diseño bonito, pero nos permite anclar contenidos en la página de una manera sencilla. Nosotros, por tanto, seremos los que nos encargaremos de diseñar una página web que tenga un aspecto agradable, pero podremos partir de una estructura en columnas, donde ceñir los espacios para que quede todo bien colocado. Con la práctica notaréis que, saber de antemano los espacios disponibles para las columnas del diseño de nuestra web, resulta bastante útil a la hora de diseñar con algún programa como Photoshop, tal como podréis ver en el siguiente vídeo del diseño de una web con Photoshop.

960 Grid System lleva este nombre porque es un sistema de rejilla para hacer páginas con 960 píxeles de ancho. Las columnas que podremos colocar en la rejilla tendrán distintas anchuras, pero siempre el ancho total de la página será de 960 píxeles. Se ha elegido este valor porque 960 es divisible por una buena cantidad de números, lo que lo hace más versátil para poder alcanzar páginas resultantes de la más variada gama.

En la propia página de inicio de 960 Grid System se puede acceder a la descarga del Framework y a algunas explicaciones sobre su uso, así como a ejemplos de páginas que lo utilizan para la maquetación CSS y a un demo interesante para poder ver el tipo de columnas que se pueden conseguir, sus anchuras, etc.

http://960.gs

Variantes de 960 Grid

El propio framework dispone de dos variantes distintas, para hacer páginas utilizando 12 ó 16 columnas. No es que necesitemos utilizar todas las columnas disponibles para realizar la maquetación, sino que la rejilla tendrá esas divisiones verticales donde podemos situar los elementos. La variante de 12 columnas da menos posibilidades para repartir los espacios, pero en muchos de los casos será más que suficiente para crear cualquier estructura de página. En cuanto a la variante de 16 columnas, da una gama mayor de posibles anchos para las columnas, que puede ser necesaria en diseños con un nivel de detalle más alto.

En ambas variantes las columnas que se consiguen tienen un margen a cada lado de 10 píxeles, por lo que si colocamos dos columnas, una al lado de otra, entre los márgenes de las dos a la vez, obtendremos una separación de 20 píxeles entre ellas.

Anchuras posibles con la variante de 12 columnas

Con la primera de las variantes de 960 Grid podemos hacer divisiones en hasta 12 columnas distintas. Teniendo en cuenta los márgenes a la izquierda y la derecha de las columnas, las anchuras de las que disponemos serán las siguientes:

1: 60px
2: 140px
3: 220px
4: 300px
5: 380px
6: 460px
7: 540px
8: 620px
9: 700px
10: 780px
11: 860px
12: 940px

Cualquier columna tendrá que tener uno de estos tamaños disponibles. En una sección podemos poner varias columnas de diversos tamaños, siempre teniendo en cuenta que la anchura máxima disponible será de 96 píxeles, menos los márgenes.

Por ejemplo, para un diseño a 3 columnas, una combinación de anchuras podría ser de 140px, 460px y 300px.

Anchuras posibles con la variante de 16 columnas

Utilizando la variante de 16 columnas tenemos 16 posibles anchuras de elementos de la página, lo que puede aumentar las posibilidades de elección. Las distintas anchuras sobre las que podríamos trabajar son las siguientes:

1: 40px
2: 100px
3: 160px
4: 220px
5: 280px
6: 340px
7: 400px
8: 460px
9: 520px
10: 580px
11: 640px
12: 700px
13: 760px
14: 820px
15: 880px
16: 940px

Así pues, con este sistema podríamos maquetar hasta 16 columnas de 40 píxeles cada una, o cualquier combinación que deseemos, siempre que la anchura más los márgenes de los elementos sea de 960 píxeles.

En los archivos para descarga del framework encontraremos un demo que nos puede dar una idea exacta de los tamaños de las cajas y las posibilidades de maquetación. También podemos ver el demo en la URL: http://960.gs/demo.html

En definitiva, con 960 Grid tenemos bastante versatilidad para hacer nuestras maquetaciones. Todavía tenemos que explicar cómo utilizar el framework, lo que dejaremos para siguientes artículos, pero al menos podemos hacernos una idea de las posibilidades.