Masonry

Masonry grids create a deterministic grid layout, positioning items based on available vertical and horizontal space. It contains performance optimizations like virtualization and support for infinite scrolling.

Considerations

Inspiring

Masonry is an immersive storytelling method for showing browsable content.

Scannable

Since masonry displays content collectively and cohesively, item tiles can be scanned quickly to preview and compare.

Engaging

Masonry is attention-grabbing without being overwhelming.

Anatomy

Title
Content
Link

Properties

Title

A title is required for all masonry feeds. The title should be short and summarize the content within the feed. A link, “See all” by default, can be appended to the title. The link should lead to a page with more related content.

Filter bar

A filter bar can be added between the section title and items in a gallery grid. Filters only apply to the items in this module, not the rest of the page. If a user selects filters, they dynamically update this section only in-page. As they scroll, filters lock to the top of the page until the user scrolls past the module.

Size

There are 2 sizes for masonry tiles: Small and Large.

Two item tiles next to each other. The left is a small tile with a title and price. The right is a large tile with a title and price.

Style

There are two styles for masonry tiles: Pill and Title.

Two item tiles next to each other with the images in a portrait orientation. The left has a pill with a price in the bottom left corner of the image. The right has a traditional title and price below the image.

Aspect Ratio

Masonry grids should use at least 2-4 different ratios.

1:1
3:4
4:3
9:16
16:9

A row of images in different aspect ratios. From left to right is 1:1, 3:4, 4:3, 9:16, and 16:9.

Ratio cropping

Images are cropped or scaled to their closest aspect ratio to best fit into the masonry grid.

A row of images in different aspect ratios. From left to right is 1:1, 3:4, 4:3, and 9:16. A top row shows the original photos, and the bottom row shows the images cropped to their nearest available aspect ratios.

Behavior

Number of columns

The number of columns in the masonry feed changes responsively based on the width of the grid and margins. The item width will grow and shrink to fill the column space. As you scale across breakpoints, be sure to follow the specific column guide for each grid size.

A detailed grid of screen size names and widths. There are 4 columns. From left to right reads “Small”, “Medium”, “Large”, and “X-Large”. Small has 320 Min, 360 Android HTML, and 375 IOS and 540. 540 is highlighted in pink with “2 columns”. Medium has 600, 768, and 1024. 768 is highlighted in pink with “3 columns”. Large has 1280 and 1440. 1280 is highlighted in pink with “4 columns” and 1440 is highlighted in pink with “5 columns”. X-Large has 1640+.

Pagination

We recommend avoiding pagination on small screens and native applications. Use a “see more” or infinite scroll pattern instead to allow users to load content on demand.

Medium-to-large screen and native tablet apps can use a “see more” pagination where infinite scroll patterns aren’t appropriate. “See more” controls are fixed to the bottom of grids. Users only need to tap the control once. After that, the feed should automatically load more once they reach the end of the scroll.

A large screen design with a masonry grid and “See more” tertiary button at the bottom.

Content

Product tiles

Product tiles display an item preview with a select set of details to further decision-making and quickly compare similar items.

An item tile with attribute callouts. In the top right, “Add to Watchlist” points to the save icon. Beneath the image, title, price, and sponsored text is highlighted.

Live tiles

Live tiles display a live stream, preview an upcoming event, or display a playback of a stream. Live tiles have minimal attributes to focus the attention on the video.

An item tile with attribute callouts. Towards the top, the red “LIVE” pill is callout as a live status, followed by the save icon. In the bottom left of the image is a price pill.

Minimum content

There should be a minimum of 4-5 item tiles in each column on the initial load of the masonry grid.

A masonry grid on tablet with 3 columns that are filled with images. The tiles use the pill version.

Screen sizes

Small

At small-screen sizes we recommend defaulting to a pill-style feed for a clean and easy-to-browse experience.

A masonry grid on mobile with 2 columns that are filled with images. The tiles use the pill version.

Medium

At medium sizes, tiles can either use pill or title versions, but we recommend keeping masonry tiles minimal by using the pill style.

A masonry grid on desktop with 4 columns that are filled with images. The tiles use the pill version.

Best practices

Tile styles

Do keep all item tiles in a masonry grid the same style.

A mobile screen with 2 columns of masonry tiles all using the pill version.

Don’t mix item tile-style in a masonry grid.

A mobile screen with 2 columns of masonry tiles with a mixture of pills and title versions.

Content

Do use masonry grids for a mix of content and categories.

A mobile screen with 2 columns of masonry tiles that showcase a variety of items “Curated for you”.

Don't use masonry grids to compare very similar items.

A mobile screen with 2 columns of masonry tiles that showcase similar small wooden tables items.

Tiles per column

Do keep the same number of item tiles in each column. For example, if column A has 5 items, each additional column should have 5 items.

A graphic that shows off 4 columns of images titled “A”, “B”, “C”, and “D”. A has 5 images, B has 5 images, C has 5 images, and D has 5 images.

Don't have a different number of item tiles in each column. For example, if column A has 5 items, don't add fewer or more items in additional columns.