---
url: /foundations/layout/breakpoints/expanded.md
description: Breakpoints ensure layouts work across a wide range of devices
---

# Breakpoints

Breakpoints ensure layouts work across a wide range of devices

[Overview](overview.md) · [Compact](compact.md) · [Medium](medium.md) · **Expanded** · [Large & extra-large](large-extra-large.md)

Layouts for expanded [breakpoints](overview.md "Breakpoints are opinionated window sizes where a layout changes to match available space, device conventions, and ergonomics (previously window size classes).") are for **screen widths from 840dp to 1199dp.**

![Supporting pane layout of a video app. The large, primary pane has the video, title, and actions. The secondary pane has queued videos.](/assets/56833250-mp41hvbo-01.CqqFhFIG.webp)

Two-pane layouts are often best for expanded breakpoints

## Navigation

Place navigation components close to edges of the window where they’re easier to reach. Use a [navigation rail](../../../components/navigation-rail/overview.md "Navigation rails let people switch between UI views on mid-sized devices."), either collapsed or expanded.

The navigation rail can be hidden in secondary destinations as long as the primary destination can still be accessed using a back button.

For sorting, filtering, or secondary navigation, use tabs or other components directly in the pane.

![The navigation area is a vertical bar at the left of the screen. To its right, the body pane fills the rest of the window.](/assets/57328611-mp41iro5-02.Dfmo9k9r.webp)

1. Navigation area
2. Single pane

## Panes

Use a single-pane or two-pane layout.

A two-pane layout is often best for expanded breakpoints. However, a single-pane layout can work when displaying visually- or information-dense content, such as videos.

![A single pane covers most of the expanded screen except for the navigation area and margins.](/assets/8c835de2-mp41jkb5-03.CVbwck7O.webp)

At an expanded breakpoint, reserve single-pane layouts for information-dense content

When using a [fixed-and-flexible](../scaffold/panes.md#92371c3b-587d-4c6f-8105-05b69dcec81a) layout, the fixed pane should have a width of 360dp by default.

<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Fmp41knzh-GM3_Applaying%20Layout_Understanding_Part_10_IA_v01.mp4?alt=media" aria-label="A 2-pane layout at an expanded breakpoint. The fixed pane starts at 360dp, then expands to a single-pane layout."></video>

In a fixed-and-flexible layout, the fixed pane is 360dp by default

A [split-pane layout](../scaffold/panes.md#dc7982b7-754c-410a-9e88-18a54557c87b) uses two flexible panes and visually centers the spacer by default.

<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Fmp41lyj0-ly7433ph-GM3-Styles-Foundations-Layout-ApplyingLayout-2-v01.mp4?alt=media" aria-label="A nav rail and a pane fill 50% of the window. A second pane fills the remaining 50%."></video>

The navigation and first pane are 50% of the window width to keep the spacer visually centered

## Spacing

Expanded layouts have a leading and trailing margin of 24dp.

The spacer between panes is 24dp.

![2 pane layout with 24dp margins and 24dp space between panes.](/assets/a51efbf6-mp5l3xgt-06.NYFzhxWN.webp)

Use 24dp for margins and spacer in an expanded layout

## Special considerations

An expanded layout will need to transition dynamically to a compact or medium layout when:

* A foldable device is folded
* A tablet is rotated from landscape to portrait
* The app goes from full-screen to split-screen
* Multi-window mode is initiated
* A free-form window is resized

<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Fmp41ofdd-GM3_Applaying%20Layout_Expanded_07_IA_v01.mp4?alt=media" aria-label="Email app moves from 2-pane expanded layout to medium to 1-pane small layout."></video>

Consider how an expanded layout should change at medium and compact breakpoints