Se denomina sistema de grillas a una estructura conformada por líneas verticales y horizontales que se intersectan. En el diseño web sirven para colocar y alinear contenido de modo que la layout no luzca desordenada y hasta cierto punto para guiar la vista de los usuarios. El uso de un sistema de grillas asegura la legibilidad de la composición.
En toda layout se hace uso de un sistema de grillas, pero con el incremento en el uso de dispositivos móviles, la cuadrícula ha cobrado importancia también en el diseño responsive, ya que gracias a ésta se puede reajustar el contenido en pantallas más pequeñas.
En este artículo te listamos algunos sistemas de grillas CSS para diseño responsive. La gran mayoría de frameworks contiene un sistema de grillas, pero si deseas encargarte de todos los demás componentes del sitio, un sistema de grillas podría ser la opción más acertada para minimizar recursos.
Chewing Grid
Chewing Grid es un sistema de grillas creado especialmente para listado de elementos como videos o artículos. Cada uno de estos elementos se encuadra en una rectángulo. Chewing Grid se ajusta automáticamente según el número máximo de columnas y el tamaño mínimo y máximo de cada rectángulo que delimita los elementos.
Puedes usarlo en conjunto con Sass para generar clases propias o incluso crear una cuadrícula personalizada.
Lemonade
Lemonade es un sistema de grillas flexible y sencillo de usar. Puedes hacer uso del sistema de 12 columnas predeterminado o crear una layout con un menor número de columnas. Posee una documentación bastante detallada donde te explican cómo personalizar Lemonade para tus proyectos. Lemonade es compatible con los navegadores y dispositivos móviles más populares.
Unsemantic
Unsemantic es otro sistema de grillas que se considera sucesor del antes popular 960 Grid System. Funciona de manera similar a este sistema, pero en vez de tener columnas fijas, funciona en base a porcentajes. De esta manera, se convierte en una opción más viable para diseño responsive.
Herow
Herow es un sistema de grillas que proporciona mixins sencillos de usar y personalizar. Gracias a este recurso puedes lidiar con diversas cuestiones propias del diseño responsive.
Gridism
Gridism es un sistema de grillas de diseño responsive sencillo de emplear. En pantallas que poseen un ancho menor de 568 px las unidades del sistema son agrupadas, mientras que en pantallas más grandes pueden tener un ancho de 978 px o 1140 px.
One% CSS Grid
One% CSS Grid es un sistema de grillas de 12 columnas. Ha sido diseñado para crear una layout web responsive de manera rápida y sencilla. Trabaja en base a porcentajes de modo que se puede adaptar a distintas dimensiones de pantalla. One% CSS Grid se ocupa de reagrupar y modificar el tamaño de la layout para cada plataforma.
SimpleGrid
Simple Grid is un sistema de grillas ligero que posee dos tipos de cuadrículas: una para contenido y otra para layout. Posee columnas reajustables, de modo que la cuadrícula se adaptará a la resolución del navegador. Este mismo mecanismo permite la agrupación de columnas en dispositivos móviles
Responsive Grid System
Responsive Grid System ha sido diseñada para poder crear sitios web responsive. Aparte del popular sistema de 12 columnas, puedes hacer uso de 14 o 16 columnas si tu diseño lo requiere.
Ingrid
Ingrid es un sistema para layout cuyo objetivo es disminuir el uso de clases en unidades invidivuales. De esta manera, el reajuste de layouts de tipo responsive puede ser menos complicada y más divertida.
Ingrid ha sido desarrollada para ser un sistema extensible, de modo que puedes personalizarlo según las necesidades de tu proyecto.
Gridlock
Gridlock es un sistema de grillas para diseño responsive. Forma parte de un conjunto de componentes llamado Formstone. Gridlock hace uso de celdas y columnas y ofrece un número máximo de columnas para cada plataforma en base al tamaño estándar de pantalla para cada uno de ellos.
Ice Cream
Ice Cream es un sistema de grillas de 12 columnas que posee una sintaxis sencilla. Ha sido desarrollado para que puedas crear una layout responsive de manera fácil y rápida.
Gridly
Gridly es un sistema de grillas ligero (pesa alrededor de 200 bytes). Ha sido desarrollado teniendo en mente el ahorro de recursos, de modo que puedes crear una layout de manera sencilla y sin sobrecargar de recursos tu sitio web. Gridly es compatible en los navegadores más populares.
Gridle
Gridle es una completo sistema de grillas que te permite generar cuadrículas con todas las características que necesites. Ha sido desarrollada con el fin de ser una cuadrícula que incluya todas las funciones que poseen otros sistemas de grillas populares. Gracias la definición de clases y mixins puedes crear y usar cuadrículas de manera sencilla.
En conclusión…
Usar una cuadrícula o sistema de grillas es esencial para tus diseños responsive. Usando alguno de los recursos listados puedes crear tu propia layout de manera rápida y sencilla, incluso algunas ofrecen mayor libertad para personalizarlas a la medida de tus proyectos.
Usar estos sistemas de grillas puede ser la solución perfecta cuando quieres crear un sitio web sencillo y sólo necesitas una pequeña ayuda para crear una layout de diseño responsive que se adapte a pantallas pequeñas sin problemas.
