Primeras notas de uso de 960 Grid System

  • Por
Primera demo de uso del framework CSS 960 Grid, para aprender lo más básico acerca de maquetar con CSS utilizando este sistema de rejilla.
La maquetación con CSS se facilita mucho con 960 Grid System, como veremos en este artículo, en el que no vamos a mostrar todas las posibilidades del framework, sino más bien una pequeña introducción a su uso para maquetar contenidos con muy poco esfuerzo. Ya hablamos de este sistema en el artículo de desarrolloWeb.com Presentación de 960 Grid System

Simplemente vamos a hacer un esquema de contenedores que colocaremos con distintas anchuras y en columnas diferentes, para ver cómo se posicionan y cómo se define la anchura de los elementos por medio de este framework CSS. En cada contenedor, por ahora, colocaremos simplemente un párrafo con un contenido de texto.

Para realizar este ejemplo y por reducir la complejidad del mismo, vamos a utilizar la rejilla de 12 columnas (en vez de la de 16 columnas), que nos da la suficiente versatilidad.

Contenedor principal de 12 columnas

Todo lo que se desee colocar en la página debe ir en un contenedor principal. Este contenedor tiene el nombre de class CSS "container_xx", donde xx es el número de columnas que vamos a utilizar. Para nuestro caso a 12 columnas, tendríamos el siguiente contenedor:

<div class="container_12">
...
</div>

Dentro del container colocaremos los elementos de la página ya con la estructura de rejilla.

Elementos de la rejilla

Cada elemento a colocar en el contenedor tiene una clase como "grid_x", siendo x el número de la clase que tiene la anchura deseada. En el artículo anterior ya vimos el listado de anchuras de columna permitidas por 960 Grid, para la variante de 12 columnas. A cada columna le pusimos un número para identificarla. Ese número es lo que tenemos que colocar dentro del nombre de la class CSS que utilicemos. Para abreviar la referencia, coloco aquí también ese listado de rejillas con sus anchuras:

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

Por ejemplo, si queremos un elemento que utilice una columna con toda la anchura disponible (sería la grid de anchura 940px (número 12), utilizaríamos este código:

<div class="container_12">
   <div class="grid_12">
      <p>940 px</p>
   </div>
   <div class="clear"></div>
</div>

Como se puede ver, se ha utilizado el nombre de clase grid_12 y la anchura del contenedor 12 es de 940 píxeles.

Dentro del container, después de cada fila de elementos, hay que colocar un div con class="clear", que elimina posibles problemas de float que pudiéramos tener en el diseño con columnas.

Por poner otro ejemplo, ahora pensemos en una estructura de dos columnas, donde ambas midan 460 píxeles de anchura:

<div class="container_12">
   <div class="grid_6">
      <p>460 px</p>
   </div>
   <div class="grid_6">
      <p>460 px</p>
   </div>
   <div class="clear"></div>
</div>

Ahora, por complicarlo un poco más, vamos a tener varias filas de contenedores, donde cada uno colocaremos diferentes números de columnas y anchuras:

<div class="container_12">
   <div class="grid_12">
      <p>940 px</p>
   </div>
   <div class="clear"></div>
   
   <div class="grid_2">
      <p>140 px</p>
   </div>
   <div class="grid_7">
      <p>540 px</p>
   </div>
   <div class="grid_3">
      <p>220 px</p>
   </div>
   <div class="clear"></div>
   
   <div class="grid_6">
      <p>460 px</p>
   </div>
   <div class="grid_6">
      <p>460 px</p>
   </div>
   <div class="clear"></div>

</div>

Podemos ver que se utilizan constantemente las class de CSS con nombres grid_x, para especificar contenedores de distintas anchuras. Después de cada fila de elementos se coloca el mencionado DIV con class="clear". En este caso que tenemos varias filas es todavía más importante utilizarlo.

Este último ejemplo se puede ver en una página aparte.

Como se puede ver en esta primera demo de uso de 960 Grid System, maquetar con varias columnas y distintas áreas de contenidos es bien simple. Ahora faltaría meter contenidos en cada uno de los contenedores de la rejilla. No obstante, estas no son las únicas cosas que tenemos que saber para maquetar con 960 Grid System, por lo que en futuros artículos de Desarrollo Web .com seguiremos viendo otros aspectos más avanzados del framework CSS.

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

Pepe

13/4/2009
Espero que sigais publicando sobre este tema
Hola, espero que publiquéis pronto los siguientes artículos de este manual, pues me interesa bastante el tema de la maquetación css. Y si puedo de paso aprender con un framewrok de esos... pues genial!
Así de momento parece todo basnte facil y potente... pero necesito más...
gracias!

Sergio Sam

17/4/2009
Porque este y no otro ?
Hola hace rato vi un framework de css el yui que es de yahoo... que además trae un montoooooon de cosa y ejemplos... que tiene este en particular ? porque eligieron este es el mas famoso ? el mas versátil ? el mas usado en el mercado ?
Gracias por el tutorial esperamos mas :-)
Sergio Sam
http://www.noleaesto.com.ar

joan

23/4/2009
anchos de columnas
960px és un ancho fijo, qué ocurre con los layout "líquidos"?, no se contempla en este sistema?

midesweb

24/4/2009
Elegimos 960 Grid System porque es el más usado
Lo cierto es que elegimos explicar este framework CSS porque es el más usado, según las informaciones que había leído por ahí. Así que algo tendrá que ver con que sea versátil y potente, pero la verdad que no puedo opinar y comparar con otros por mi experiencia previa.

El otro día conocimos otro framework CSS que está hecho en Español, del que publicamos una nota inicial, quizás también lo expliquemos y le dediquemos más tiempo en el futuro. De momento os dejo la explicación del hallazgo: http://www.desarrolloweb.com/de_interes/simple-framework-css-espanol-1705.html

Y sobre publicar los siguientes artículos, con total seguridad que los haremos pronto, junto con un ejemplo de maquetación CSS desde cero. Me alegra saber que interesa el tema, así que razón de más para darnos prisa en preparar las nuevas entregas!

midesweb

24/4/2009
Sobre los diseños líquidos o fluidos...
960 grid no soporta diseños líquidos, siempre serán con anchura fija de 960px.

Pero existen variantes de este framework adaptadas para que soporten diseños fluidos:

Fluid 960 Grid System: http://www.designinfluences.com/fluid960gs/

Esta otra variante es para diseños elásticos, que no sé muy bien qué se refiere... http://csswizardry.com/typogridphy/

Fernando

30/4/2009
Problema con las hojas de estilos del Grid
Hola me llamo Fernando estoy usando en 960 Grid System y me ha surgiodo un problema con las hojas de estilos. Pude armar todo mi template sin nigun incoveniente el problema surgio a la hora de crear el menu de navegación el cual yo lo creo con el Sothink DHTML Menu (debido a la simplicidad de este software y su compatibilidad con dreamweaver) y colocarlo dentro de mi archivo dwt al dar una vista previa en los navegadores note que el menu se veia distinto (o sea mal) y descubri que es debido al font.css y el reset.css que forman parte del 960 Grid System. Lo que estuve intentndo fue hacer que el DIV donde esta el menu no lea esas 2 hojas de estilo, ya que no las puedo sacar porque se me desarma el resto de la pagina, pero hasta ahora no pude, si alguien sabe como hacer eso u otra forma de solucionar el problema agradeceria la respuesta.

midesweb

26/6/2009
No coloques el reset.css
Hola Fernando,

¿Has probado a no colocar esas hojas de estilos opcionales?? osea, quitar el link a las hojas de estilos reset.css y font.css

Quizás entonces no tengas problemas!

Larenz

01/11/2009
csswizardry.com/typogridphy/
Con respecto a esa url que has dado solamente quiero aclarar que no tiene nada que ver con maquetación o el uso de grids, sino que ejemplifica el uso de tipografías, o sea el uso de CSS pero para las tipografías de un sitio web que al final vendrá de la mano con el grid 960.

Saludos