Via Jepser Bernardino les dejo una intruducción a lo que es 960 Grid, pueden seguir en su página un tutorial muy completo.
¿Qué es 960 Grid?
960 Grid es un framework de CSS que nos facilita la vida en un mil por ciento (si lo sabemos utilizar). Este grid se creó por la necesidad de tener un “estándar” en el ancho de los sitios web. En nuestros días ya es sólo un pequeño porcentaje de usuarios que utilizan resolución de 800 x 600 pixeles, mientras la mayoría ya utiliza resoluciones de 1024 x 768 px o mayores. Es por eso que un grupo de personas decidió crear este sistema de maquetado basado en 960px de ancho, con configuraciones de 12 y 16 columnas para poder combinar entre sí y así crear nuestros layout de una forma simple y rápida.
Conociendo el grid
Podemos utilizar 12 o 16 columnas para crear nuestros layouts, cada una de las columnas tiene un margen izquierdo y derecho de 10px, para crear 20px de separación entre columnas. Sabiendo esto, decimos que si utilizo 12 columnas, cada columna será de 60px cada una y sí utilizo 16 columnas, el ancho de cada una será de 40px.Visiten la página demo donde podrán observar una gama de combinaciones para darse una idea de como trabaja este framework.
Veremos ahora como es que se divide el grid en una configuración de 12 columnas:
- 60px
- 140px
- 220px
- 300px
- 380px
- 460px
- 540px
- 620px
- 700px
- 780px
- 860px
- 940px
Como verán, cada una de las filas lleva un número, que será el identificador; es decir, el ancho de la columna corresponde al número de a la par. Y se forma así: grid_xx donde “xx” es el numero de la lista. Pero,¿Cómo 960 grid sabe sí utilizo 12 o 16 columnas? Simple, tiene una clase .container_yy, donde “yy” es el numero de columnas que voy a utilizar.
Template en PSD para 960 Grid
El template es autoria de Simon Web Design y es muy util, pueden descargalo de su página.
Si te resulto interesante. Compartilo!
