Masonry Layout

Grid- a work area that contains all the design's objects.

Free masonry- a grid layout based on placing elements in a vertical space.

When spreading elements of equal height on each column, designers tend to organize them first horizontally and only then vertically.

 

 

What about elements of different heights that are still required to stick to horizontal gridlines? In this case, the result is substantially less predictable.

 

This layout is called Pinterest. www.pinterest.com was the first large website to make use of this layout.

When is it best to use this layout?

Picture galleries- allows displaying differently-sized pictures.

Blog messages- for messages of varying text-length.

Although using this grid is considered old-fashioned and even wrong by some designers, pages designed using a correct and clear grid are undoubtedly readable and aesthetically appealing.

The Pinterest grid layout generates a fantastic UX, entices the user to keep on scrolling downwards and allows easy display of various items in a structured, logical manner. This array of columns is compatible with responsive design and enables flexibility when the window-size changes.

References:

 

 

http://www.sitepoint.com/understanding-masonry-layout/

 

http://designshack.net/articles/css/masonry/

 
  Contact