Presentación de 960 Grid System

  • Por
Introducción a la maquetación de páginas web usando CSS con el sistema 960 Grid.

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.

Nota: Si te ha interesado este tema y quieres investigar sobre otras posibilidades para la maquetación CSS, puedes encontrar también en DesarrolloWeb.com un Manual del Framework CSS Blueprint.

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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

jhazmanhi_muoz_palza

05/5/2009
mira este estilod e maquetar con div
mira la forma facil pucha qeu adios tablas ... jajaja

L. Ruiz

26/6/2009
No sólo adiós a las tablas
Es una manera de maquetar, por lo que parece, mucho más sencilla todavía a lo que era el uso de tablas. Así que opino que esto es mucho más que un adiós a las tablas, sino una maquetación CSS al alcance de todos!!!

eugen40

02/9/2009
Excelente
Estoy a medio curso en HTML >> XHTLM, y depues de ver este método pienso que de nada sirven las tablas, voy a terminar el curso pero con este método como principal, es rápido y efectivo.

Gracias Miguel!!

Jailbreak

20/7/2010
Mani atado
yo hice la cochinada de hacer webs con tablas hasta que aprendi css y al ver el 960 grid system veo que uno esta maniatado en muchos sentidos y mas aun cuando se quieren hacer modificaciones, es por eso que me uno a la algo que lei en el tutorial de css de esta web, donde dice que uno ya ha hecho sus css rusticas, es mejor utilizar estas debido que seguimos nuestra tendencia y sabemos como funcionan, este método es como de pereza que se utiliza jajajaj, mi tendencia siempre es parecida para hacer webs asi que conservo css que he hecho y las tomo de base, hago algunas modificaciones y listo, en resumen no me gusto este método XD.

Jailbreak

20/7/2010
olvidaba
y se me olvidaba comentar que es facil aprender css básico que es loq ue se necesita para hacer webs con algo de calidad y se puede aprender en 2 semanas 1 o 2 horas diarias.

Luis

07/3/2011
frame 960 grid system
Alguien me puede ayudar, estoy tratando de poner los ejemplos para maquetar con este sistema y no consigo ningun resultado, pregunto hay que bajarse algo de la página original? si es así me podrian decir que es?, porque sigo los consejos, realaciono las paginas de estilos tal como dicen y no consigo nada.
Un saludo