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.
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.
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.
There are 2 sizes for masonry tiles: Small and Large.
There are two styles for masonry tiles: Pill and Title.
Masonry grids should use at least 2-4 different ratios.
Images are cropped or scaled to their closest aspect ratio to best fit into the masonry grid.
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.
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.
Product tiles display an item preview with a select set of details to further decision-making and quickly compare similar items.
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.
There should be a minimum of 4-5 item tiles in each column on the initial load of the masonry grid.
At small-screen sizes we recommend defaulting to a pill-style feed for a clean and easy-to-browse experience.
At medium sizes, tiles can either use pill or title versions, but we recommend keeping masonry tiles minimal by using the pill style.
Do keep all item tiles in a masonry grid the same style.
Don’t mix item tile-style in a masonry grid.
Do use masonry grids for a mix of content and categories.
Don't use masonry grids to compare very similar items.
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.
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.
Be sure to follow the grid and column guide for optimal visual density.
Don't overcrowd your designs.
Pill details
Item details
Pill details
Item details
Masonry is an immersive storytelling method for showing browsable content.
Since masonry displays content collectively and cohesively, item tiles can be scanned quickly to preview and compare.
Masonry is attention-grabbing without being overwhelming.
