Masonry 3.2.2

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

  Add it to your Download Basket!

 Add it to your Watch List!


Rate it!
send us
an update

MIT License

5.0/5 4
David DeSandro
C: \ UI Components
2 Masonry Screenshots:
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
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 December 18th, 2014

Runs on: Windows / Linux / Mac OS / BSD / Solaris


#grid system #CSS float #page arrangement #float #element #position #arrange

Add your review!