Masonry Layouts

There are a myriad of possibilities to show content when building a content-heavy platform, such as a news platform or cooking site. However, users could perceive a simple top-to-bottom list of items as dull and might lose interest. Instead, content should be presented in such a way that it is visually appealing to the user. One way to keep the user interested is by using large images alongside the content.

Card layouts, especially for teasers, have proven themselves in this regard. Their layout is straightforward—a large image on the top that takes up the entire width of the card with a title beneath and, optionally, a list of tags, categories, teaser text, or author information. These layouts visually encapsulate a single topic and can be arranged in many ways. For example, we could use two card sizes. On touch devices, we could place them in a single column and increase the number of columns as the screen size increases.

Depending on the content though, we might not be able to arrange the cards in a grid. For example, if some cards don't have images or lack categories, their height could change significantly. Organization in a grid leads to random large whitespace areas between otherwise tightly-packed cards.

Masonry layout

One way to mitigate these design issues is a masonry layout. As the name suggests, it aims to arrange items in a wall-like format to reduce unnecessary whitespace. Usually, elements are aligned in a left-to-right order, while the next element starts immediately underneath the component with a fixed gutter space.