---
url: /foundations/layout/canonical-examples/feed.md
description: >-
  Canonical layout examples are designs for common screen layouts across all
  breakpoints
---

# Canonical layout examples

Canonical layout examples are designs for common screen layouts across all breakpoints

[Overview](overview.md) · **Feed** · [List-detail](list-detail.md) · [Supporting pane](supporting-pane.md)

A feed layout uses a grid composition to enable quick content browsing and discovery. Key use cases include news, photos, and social media.

![Education app using a feed layout.](/assets/6a405b9c-mp736am6-feed-adapt-hero.BGveJXtx.webp)

Feed layouts help people quickly browse and discover content

## Usage

Use a feed layout to show different pieces of content through cards and lists.<br><br>Feeds support displays of almost any size as grids can adapt from single to multi-column.<br>

![An education app has 2 columns on mobile, and 4 columns on a tablet.](/assets/785f03dc-mp51zufq-02.B7Gg-Oww.webp)

Feed layouts can adapt the number of columns across breakpoints

## Dividing space

A feed composition is flexible enough to allow for content with varying proportions and sizing.<br>

![Feed layout in a medium window with 2 panes. 1 pane has 2 columns of small cards and the other has 1 large card.](/assets/b901ab63-mp521zfz-03.Cm5_JFJr.webp)

Feeds can organize content of different sizes, like using small and large cards

Use size and position to establish relationships among content elements.



Feed items should reflow when the amount of available space changes like:

* Rotating or unfolding a device
* Entering multi-window mode

The order of items is determined by their position. 



[More on adaptive design for cards](../../../components/cards/guidelines.md#99e8d17d-5bde-4bb9-8784-0ca403325b10)

![Lead article image is prominent in a 2-pane news feed.](/assets/10ef7aa5-mp528i2s-04.BI0K0ZE-.webp)

Feed items can change size to group content

## Across breakpoints

### Compact

A feed layout should stack vertically, like a list of cards with individual items filling the width of the pane.

![Cards in 2 feed layouts, compact and expanded.](/assets/757dfb69-mp52hmfv-05.WBMqmsTe.webp)

In compact windows, the cards in a feed stack vertically, filling the full width:


1. Compact breakpoint
2. Expanded breakpoint

### Medium

A feed layout can support components with different widths and be split across multiple columns.

![In a medium window, 4 equal-width columns of cards in a feed layout.](/assets/558c9e14-mp52jmhc-06.Cp2t8yuB.webp)

Feed layouts can add columns in a medium window

### Expanded, large, & extra-large

A feed layout can support components with different widths and be split across multiple columns. The number of columns should usually increase at expanded breakpoints.

![Expanded window has wider columns than a compact window.](/assets/cb29f57b-mp52lhar-07.Dt1Qd6gC.webp)

Column width can increase at larger breakpoints