En el artículo anterior presentamos el framework 960 Grid y evaluamos las posibilidades que nos brinda para maquetar nuestras webs de manera rápida y estandarizada. En este nuevo artículo, explicaremos con un ejemplo cómo trabajar con este magnífico framework.

A travez de un ejemplo mostraremos su uso, y para ello utilizaremos un grid de 12 columnas, que para lo que vamos a hacer es suficiente.

Contenedor principal (12 columnas)

Todo lo que queramos que aparezca en la página, debe ir dentro de un contenedor general. Este contenedor tiene declarada la clase "container_xx", donde _xx es el número de columnas que vamos a utilizar. En nuestro caso sería 12 y el código sería así:

<div class="container_12">

(contenido de la web)

</div>

Dentro de este container colocaremos todo el contendio de la web.

Elementos del Grid

Cada elemento del grid tiene definida una clase, "grid_x", siendo x el número de la clase que tiene la anchura deseada. En el artículo anterior ya habíamos declarado las variantes de anchura según la opción ed 12 o 16 columnas. Cada columna tiene asignado un número para identificarla. Ese número es lo que tenemos que colocar dentro del nombre de la clase CSS que utilicemos. A continuación les vuelvo a colocar el listado para una grid de 12 columnas:

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>

Se ha utilizado el nombre de clase grid_12 y la anchura del contenedor 12 es de 940 píxeles.

Debemos tener en cuanta lo siguiente, para evitar problemas de float. Después de cada fila de elementos, hay que colocar un DIV con class="clear".

Pongamos otro ejemplo, una estructura de dos columnas donde ambas midan 460px de ancho:

<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, 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>

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".

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 seguiremos viendo otros aspectos más avanzados del framework CSS.