Primeras notas de uso de 960 Grid System

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.