960 Grid System
| ||||||||||||
960 Grid System es un framework CSS orientado a maquetar sitios web (o incluso aplicaciones) con el mínimo esfuerzo posible cuyas páginas se construyen en anchuras de 960 píxeles (de ahí su nombre). Ofrece dos posibilidades de maquetación de páginas, con una rejilla de 12 ó 16 columnas.
Sumario
Variantes de 960 Grid System
El propio framework dispone de dos variantes distintas, para hacer páginas utilizando 12 ó 16 columnas. Por lo general no es necesario utilizar todas las columnas disponibles para realizar una maquetación, sino que la rejilla tendrá esas divisiones verticales donde se podrán 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 se colocan dos columnas, una al lado de otra, entre los márgenes de las dos a la vez, se obtiene 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_System se puede hacer divisiones en hasta 12 columnas distintas. Teniendo en cuenta los márgenes a la izquierda y la derecha de las columnas, las anchuras disponibles 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
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 se obtiene 16 posibles anchuras de elementos de la página, lo que puede aumentar las posibilidades de elección. Las distintas anchuras sobre las que se puede 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 es posible maquetar hasta 16 columnas de 40 píxeles cada una, o cualquier combinación deseada, siempre que la anchura más los márgenes de los elementos sea de 960 píxeles.
Ejemplo
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>
