Fluid 960 Grid System

960 Grid System es un framework CSS, que no es más que una declaración de estilos que dispone las clases necesarias para implementar columnas en una página web, de diversos tamaños, con las que maquetar nuestros contenidos fácil y ordenadamente.

Podríamos hacer un sistema propio para maquetar una página con diversas columnas, pero utilizando un framework como 960 Grid ya tendremos la mayor parte del trabajo realizado, pues simplemente tendremos que colocar a cada contenedor de elementos las clases disponibles en el sistema, para que tenga la anchura y posición deseadas.

Además, lo que me resulta más interesante de este framework es que si minimizas la pantalla del navegador, los contenedores se ajustan a este ancho y alto.

Utilizar un framework CSS no aporta nada de creatividad para realizar un diseño bonito, pero nos permite anclar contenidos en la página de una manera sencilla. Nosotros, por tanto, seremos los que nos encargaremos de diseñar una página web que tenga un aspecto agradable, pero podremos partir de una estructura en columnas, donde ceñir los espacios para que quede todo bien colocado.

960 Grid System lleva este nombre porque es un sistema de rejilla para hacer páginas con 960 píxeles de ancho. Las columnas que podremos colocar en la rejilla tendrán distintas anchuras, pero siempre el ancho total de la página será de 960 píxeles. Se ha elegido este valor porque 960 es divisible por una buena cantidad de números, lo que lo hace más versátil para poder alcanzar páginas resultantes de la más variada gama.

Este framework también incorpora algunas funcionalidades de jQuery o Mootools que podrás comprobar en ejemplo que muestra todo su contenido.

Utilizando este framework vamos a crear una estructura que contiene cabecera, columna izquierda, contenido y pie de página.

En este ejemplo solo incluimos en nuestra página el archivo «grid.css» que incorpora el framework y utilizando sus clases.

Ver el ejemplo en funcionamiento