Actualmente, el mundo del diseño web es bastante interactivo. No sólo por qué ahora añadir animaciones y transiciones es una tarea sencilla que no causa problemas de lentitud en el sitio, sino también porque los layouts han evolucionado muchos y ahora podemos ver infinidad de layouts distintos, según el sitio y el contenido que se decida incluir.
En esta época se han hecho populares los sistemas de layout cuadriculadas pues permiten organizar el mejor el contenido. Muchos de estos sistemas son de diseño adaptativo de modo que se reordenan de manera intuitiva en diferentes pantallas y ofrecen una experiencia de usuario óptima en diversos dispositivos.
En este artículo te listamos algunos plugin JQuery que te permiten crear sistemas de cuadrículas y layout para tus sitios web.
Gridify
Este ligero plugin te permite crear un layout cuadriculado como el de Pinterest.
Free Wall
Este plugin JQuery es de diseño adaptativo y te permite crear diversos tipos de layout. Puedes añadirles efectos en CSS3.
matchHeight
Este plugin te permite configurar la altura de los elementos que selecciones de modo que se mantiene igual para cada elemento.
Elastic Columns
Este ligero plugin te permite crear una cuadrícula con columnas de ancho fijo.
RowGrid.js
Este ligero plugin te permite colocar elementos en filas. Es de diseño adaptativo y se puede integrar para usar con infinite scrolling.
Masonry
Esta librería de JavaScript te permite colocar elementos de manera automática, de acuerdo al tamaño de los mismos y el espacio disponible.
JQuery Nested
Este plugin permite generar layouts cuadriculados de múltiples columnas. Además, se asegura no dejar ningún pixel de espacio entre cada elemento.
Heads-Up Grid
Este plugin te permite crear tu propia layout cuadriculada al configurar diversos valores como el número de columnas, el tamaño de la página, los márgenes, etc. De esta manera, te permite crear una experiencia óptima para diversos tipos de pantalla.
Grid-A-Licious
Este plugin te permite crear un layout cuadriculado como el de Pinterest. Una de sus mayores ventajas es que es de diseño adaptativo, de modo que se encuentra apto para cualquier tamaño de pantalla.
CollagePlus
Este plugin te permite organizar tus imágenes dentro de un contenedor. Puedes colocar bordes y realizar otras modificaciones básicas.
Gridstack.js
Este plugin te permite crear una cuadrícula donde cada cuadrado o rectángulo de cada columna puede moverse y cambiar de sitio. Es una layout dinámica y es perfecta para dispositivos móviles pues tiene soporte para gestos táctiles.
Brick by Brick JS
Este ligero plugin es una alternativa al popular Masonry y te ofrece muchos métodos para poder crear una layout tu medida como mostrar y eliminar contenido o esconderlo, etc. Es compatible con Android y con las versiones móviles de Mozilla y Chrome.
Responsive Equal Height Blocks
Este plugin te permite dividir tu sitio en filas. Puedes elegir la altura del primer elemento de cada fila y configurarlo para que esta altura sea fija y se repita en todos los elementos de la fila.
Gridmanager.js
Este plugin te permite crear filas y rectángulos o cuadrados que puedes editar. Requiere JQuery, JQueryUI y Bootstrap como herramientas mandatorias y adicionalmente puedes hacer uso de TinyMCE para poder configurar este plugin.
JQuery Portfolio
Este plugin te permite exhibir tus imágenes o cualquier otro elemento en una cuadrícula bien organizada y moderna. Es bastante simple de configurar.
GridList
Este plugin te permite crear elementos que puedes arrastar y colocar para volver a organizarlos como prefieras. Es de diseño adaptativo, eso quiere decir que está apto para verse bien en diferentes tamaños de pantalla.
Responsive Grid System with Fixed Gap
Este plugin te permite calcular el tamaño de columnas para que puedas trabajar con ellas de manera más sencilla al momento de crear un layout.
JQuery Shapeshift 2.0
Este plugin es ideal para crear una layout como la de Pinterest, que organiza su contenido en una cuadrícula dinámica. Por medio de JQuery UI Los elementos pueden ser seleccionados y movidos a otro lugar. La cuadrícula se organiza conforme vas moviendo los elementos de modo que nunca queda espacios en blanco notorios. Es compatible con dispositivos que soportan gestos táctiles.
Gridster
Este plugin te permite generar una layout cuadriculada de diversas columnas. Al igual que JQuery Shapeshift, cada elemento de la cuadrícula puede ser arrastrado y movido hacia otro lugar. No es necesario usar JQuery UI.
Flex
Este plugin te permite crear una cuadrícula que contiene ciertos elementos interactivos. Al colocar el cursor sobre alguna de las imágenes o elementos que se encuentran dentro de este borde, el elemento se expande ligeramente. Es un gran efecto y es perfecto para imágenes.
Salvattore
Otra alternativa al popular plugin Masonry. Funciona a través de CSS y permite crear elementos HTML y colocarlos de manera ordenada en las columnas que conforman la cuadrícula.
