Plenty of JavaScript libraries to dynamically layout tiles on your page duing resize like Masonry, Isotope, Packery, etc. This post will guide in which library to use and other alternatives also.

Availaible Options

Following table shows comparision of some of most commonly used libraries that provide layout mechanism of grid items:

jQuery ?
Drag & Drop
Sort Items
Filter Items
Layout Options
Tile Animations
StackOverflow + GitHub6 5 2 4 3 1

@desandro started Masonry as MIT license, based on its succes he created Isotope with Sorting and Filtering features as well as Packery with Drag & Drop features. However, Isotope and Packery were commercial and not free. But all three libraries does not require jQuery. Masonry is best if you don’t need sorting, filtering, drag and drop etc. Masonry, Isotope, and Packery have the biggest community, and won’t leave you with issues.

Having both filtering, sorting and drag & drop capability, you’ve to go with one of the other plugins like Gridster, or ShapeShift. But, Gridster isn’t responsive like ShapeShift. Shuffle.js except from Drag & Drop, additionally contains Search and Animated Tile Entry.

Masonry Showcase

Packery Showcase

Isotope Showcase