Plugin JQuery para crear sistemas de cuadrículas

0

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

Plugin JQuery para sistemas de cuadrículas: Gridify

Este ligero plugin te permite crear un layout cuadriculado como el de Pinterest.

Free Wall

Plugin JQuery para sistemas de cuadrículas: FreeWall

Este plugin JQuery es de diseño adaptativo y te permite crear diversos tipos de layout. Puedes añadirles efectos en CSS3.

matchHeight

Plugin JQuery para sistemas de cuadrículas: matchHeight

Este plugin te permite configurar la altura de los elementos que selecciones de modo que se mantiene igual para cada elemento.

Elastic Columns

Plugin JQuery para sistemas de cuadrículas: Elastic Columns

Este ligero plugin te permite crear una cuadrícula con columnas de ancho fijo.

RowGrid.js

Plugin JQuery para sistemas de cuadrículas: 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

plugin-jquery-layout-cuadriculas-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

Plugin JQuery para sistemas de cuadrículas: 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

Plugin JQuery para sistemas de cuadrículas: 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

Plugin JQuery para sistemas de cuadrículas: 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

Plugin JQuery para sistemas de cuadrículas: CollagePlus

Este plugin te permite organizar tus imágenes dentro de un contenedor. Puedes colocar bordes y realizar otras modificaciones básicas.

Gridstack.js

Plugin JQuery para sistemas de cuadrículas: 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

Plugin JQuery para sistemas de cuadrículas: 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

Plugin JQuery para sistemas de cuadrículas: 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

plugin-jquery-layout-cuadriculas-gridmanager

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

Plugin JQuery para sistemas de cuadrículas: 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

Plugin JQuery para sistemas de cuadrículas: 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

plugin-jquery-layout-cuadriculas-responsivegridsystem

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

Plugin JQuery para sistemas de cuadrículas: JQuery Shapeshift

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

Plugin JQuery para sistemas de cuadrículas: 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

Plugin JQuery para sistemas de cuadrículas: 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

Plugin JQuery para sistemas de cuadrículas: 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.

Comparte este post.
Artículos Recomendados Para Tí:

Escribe tu comentario