(en-gb) ▼ 
Klick hier, um diese Seite auf Deutsch zu lesen
Click here to read this page in English
Cliquez ici pour lire cette page en français
Klik hier om deze pagina in het Nederlands te lezen39822members
982online
139164Beiträge
Definition
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.
Understanding Masonry Layout
The modern web design world is an innovative one. Table-based lists with offset pagination are rapidly falling out of favor, whereas Masonry layouts with infinite scrolling are becoming the new norm. This article provides an in-depth look at the Masonry layout and its usage.
Defining Masonry Layout
The term Masonry layout probably owes its name to the popular jQuery Masonry plugin that is used to generate this type of layout. Masonry layout is also referred to as the Pinterest Style Layout, as www.pinterest.com was the first major website to use this layout style.
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.
Developers and designers are accustomed to seeing web pages laid out with CSS floats. But this common type of layout doesn’t take the size of the elements into consideration. Instead, it adds elements one after another, first in the horizontal direction, then vertically. The following image shows a typical web page that uses floats for layout:
As you can see, having boxes with dynamic dimensions makes it difficult to design a layout without unnecessary gaps. This type of layout makes it harder for users as well, because the page height increases due to the additional spaces. It requires unnecessary scrolling to navigate to the bottom of the page. In such scenarios, we have to use a fixed-size box in each row.
Using a Masonry layout is the ultimate solution to this problem, as it reduces the spaces and tries to fit the maximum number of boxes into the rows and columns. Consider the following screenshot to see how the previous design looks in a Masonry layout. Notice that the height of the page is reduced and the layout is easier on the eye.
