I don’t know why and how, but it looks like I have a real obsession for tiled galleries and automatic grid systems, for WordPress and jQuery.

Currently, there are a fistful of considerable javascript plugins able to build self-composing grids. I want to compare four of these plugins:

 

Final Tiles Gallery

It’s a jQuery plugin that can build a responsive tiled gallery. The algorithm is able to place images in a grid without spaces between the tiles Its main feature consists of keeping the aspect ratio of the images, so it doesn’t crop them . An interesting feature is the snapping grid. The snapping grid is a solution to increase the chance of having aligned tiles, but what does it mean “aligned tiles”? Look these images:

Without snapping grid With snapping grid

The example on the left show what happens without a snapping grid: tiles tend to arrange in a multi-column layout, like Pinterest, to be clear. The image on the right shows what happens using a constraint on the size of the images: they tend to be aligned, building much more interesting layouts. It’s possible to obtain a great variety of grids just playing with parameters like: margin (between tiles), minimum tile width and the size of the snapping grid.

An example of this plugin:

 

Tiles Gallery

The aim of Tiles Gallery  is to completely fill an area with images, without spaces between them. While Final Tiles Gallery grows vertically, Tiles Gallery always fill the desired area, so you can decide the size of the gallery nevertheless how any images it contains. This gallery is, however, responsive so, it adapts to its container width if this changes.

To achieve  this result, the gallery must crop the images, actually it’s a smart crop, that is you can decide what part of the image can be cropped. Also consider that the grid generated by this gallery is always random. Here is an example of this plugin:

 

Isotope

The aim of Isotope is placing elements in a way that minimizes empty spaces between them.  It doesn’t resize the tiles, so its main feature is a smart positioning that couldn’t be reached just with CSS, however there are some layouts available other than the default one.

Masonry

There’s no much to say about Masonry, you have seen many sites using a Pinterest-clone layout,
 this plugin places boxes creating a multi-column layout. The good is that you don’t have empty
 spaces between boxes, the bad is that, maybe, this kind of grid is a bit “boring”.