Un CSS Grid Framework es una herramienta que nos facilita el maquetado y el desarrollo de un sitio web al proveernos una guía sobre la cual trabajar. Esta guía consiste en un sistema de columnas, espacios y márgenes que nos ayudan a posicionar los bloques de contenido de nuestro diseño de manera rápida y organizada.
Hay muchas ventajas estéticas y de diseño que obtendremos al usar un framework, entre las cuales puedo mencionar las siguientes:
- Uniformidad y consistencia en la posición de los elementos.
- Elimina el uso de tablas.
- Soporte para múltiples navegadores y pantallas.
- Provee una base de css con la cual trabajar rápidamente, ahorrando el tiempo necesario para construir una.
- Cohesion visual entre los elementos de la página.
- Fácil de implementar y mantener


Como pueden ver, el contenido en la primera imagen se ve mucho más organizado que la segunda. Es casi como si tuviera un sentido lógico y eso se debe a que como humanos siempre tendemos a buscar patrones.
(Aquí pueden ver una charla de Michael Shermer en TED.com explicando como los seres humanos tendemos a buscar patrones en nuestro entorno. [02:20 - 02:50]
Charla en TED )
En internet podemos encontrar muchos frameworks tales como:
Blueprint CSS Grid Framework,
Yahoo! YUI Grids CSS,
YUI: CSS Grid Builder,
YAML,
960 Grid System o herramientas para crear un framework propio:
Grid Designer 2.
Nosotros preferimos utiliza
960.gs como framework porque es fácil de mantener y su semántica es fácil de aprender. Aquí pongo un ejemplos del uso de las columnas del
960.gs en nuestro sitio:
Más adelante estaré hablando del
960.gs y el tema
Omega de Drupal que es utilizado para construir sub-temas basados en él y es el que estamos utilizando en este sitio.
Enlaces:
Imagen de mala maquetación.
960.gs
Blueprint CSS Grid Framework
Yahoo! YUI Grids CSS
YUI: CSS Grid Builder
YAML
Grid Designer 2