Defining Masonry Layout
Defining Masonry Layout

Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall.

What is Masonry?
Masonry layouts are a rage nowadays. Pinterest come out with masonry layout a big hit, many sites have started using this layout to build some really creative websites. In responsive design this layout creates magic to display the blocks. Masonry is a grid layout based on columns. Unlike other grid layouts, it doesn’t have fixed height rows. Basically, Masonry layout optimizes the use of space inside the web page by reducing any unnecessary gaps. Without this type of layout, certain restrictions are required to maintain the structure of layout.

jQuery Masonry
The term Masonry layout probably owes its name to the popular jQuery Masonry plug-in that is used to generate this type of layout. jQuery Masonry is the most popular solution to pull off this type of layout. It utilizes some pretty fancy JavaScript to re-flow a series of divs.

Practical Uses of Masonry Layout
Masonry layout can gives a site with better functionality, as well as enhance a site’s design. We can use this in Image Gallery, Portfolio, Blog post type of sites.

Some useful links:
Understanding Masonry Layout
Masonry cascading grid layout library
Three Super Easy Ways to Pull Off a Masonry Layout

Advertisements