Softpedia Pick image MIT License
5.0/5 4
A JavaScript layout library for arranging CSS floated elements vertically (not horizontally), improving the way non-uniform elements look when placed on a grid





As the library's author states in the product description's: "[Masonry] minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall." This is not only the inspiration behind the library's name, but also the best explanation.

Masonry basically makes sure that elements don't leave HUGE gaps between each other when arranged on a grid. This usually happens for CSS floated layouts if one element is bigger than the others. This elements ships the floating point, so a huge horizontal gap appears in the grid.

Masonry solves this problems by taking the vertical dimension into account when floating an element.

In its first versions, Masonry was a jQuery plugin, but with the recent versions, Masonry can be used as a standalone JS library as well.

There are lots of demos and examples on how to use Masonry included with the download package, along with various deviations on its concepts, and some extra support for infinite scrolling layouts, filtering, animations, and dynamic or responsive layouts.
Last updated on September 10th, 2015
Masonry - Masonry does a better job at arranging floated elements, compared to the classical CSS-based solutionMasonry - Masonry also includes a system to animate elements, while keeping the floated elements without huge gaps

0 User reviews so far.