Grid Layout (Tiling) SDKs in JavaScript
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.
Table Of Contents
Availaible Options
Following table shows comparision of some of most commonly used libraries that provide layout mechanism of grid items:
| Features | Masonry | Isotope | Packery | Gridster.js | ShapeShift | Shuffle.js |
|---|---|---|---|---|---|---|
| License | MIT | Commercial | Commercial | MIT | MIT | MIT |
| Browsers | IE8+ | IE8+ | IE8+ | IE9+ | IE9+ | IE7+ |
| jQuery ? | ||||||
| Responsive | ||||||
| Drag & Drop | ||||||
| Sort Items | ||||||
| Filter Items | ||||||
| Layout Options | ||||||
| Tile Animations | ||||||
| StackOverflow + GitHub | 6 | 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
