---
url: /foundations/layout/breakpoints/large-extra-large.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](expanded.md) · **Large & extra-large**

These breakpoints are most useful for creating web experiences tailored to laptop and desktop devices. Some products may not need large and extra-large breakpoints. Consider your platform’s conventions and users when making decisions on which breakpoints to design for.

* Layouts for large [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 1200dp to 1599dp**
* Layouts for extra-large breakpoints are for screen widths of **1600dp and larger**

![Large window with a video app in 2 pane layout.](/assets/c0f9c143-mp41v09e-01.Dt5XQfgc.webp)

A two-pane layout is recommended for large and extra-large breakpoints

## Navigation

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, depending on the amount of content.



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

![Large web browser with a small navigation area on the leading edge with 1 pane filling the rest of the window.](/assets/1d7d45a7-mp41w5ix-02.DdcNUCFj.webp)

1. Collapsed navigation area
2. Single-pane layout

An expanded navigation rail is best suited for extra-large windows, where there's still plenty of room for content. Consider collapsing the navigation rail when space is needed, or when on pages deeper in the page hierarchy.

![Extra-large web browser with an expanded navigation area and 1 pane filling the rest of the window.](/assets/27277727-mp41xhwl-03.BTCkGD_l.webp)

1. Expanded navigation area
2. Single-pane layout

## Panes

A two-pane layout is often best for large and extra-large breakpoints. 



However, a single-pane layout can work when displaying visually- or information-dense content, such as videos.

![The single pane covers most of a large screen except for the navigation area and margins.](/assets/29d8517a-mp41y2za-04.gi6Au6do.webp)

Only use a single-pane layout for dense content or media

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

![A 2-pane layout with 1 pane fixed at 412dp.](/assets/69646f73-mp41yyza-05.CW1o1_Ow.webp)

Fixed panes should be 412dp in large and extra-large layouts

When using a [split-pane layout](../scaffold/panes.md#dc7982b7-754c-410a-9e88-18a54557c87b), the spacer should be visually centered by default, even when using an expanded navigation rail.

![An expanded nav rail and the first pane take up 50% of the window, and the second pane takes up 50%.](/assets/876a9777-mp41zo3h-06.UAwAZDRL.webp)

In split-pane layouts, navigation components shrink the leading pane, so the spacer remains centered

## Additional panes

The extra-large breakpoint supports using a [standard side sheet](../../../components/side-sheets/overview.md "Standard side sheets display content without blocking access to the screen’s primary content, such as an audio player at the side of a music app. They're often used in medium and expanded window sizes like tablet or desktop.") as a third pane. When the side sheet is present, the navigation rail can remain visible, collapse, or hide completely. Don't use more than three panes. 



Note: Fixed panes in this window size are recommended to be 412dp, but side sheets have a default maximum width of 400dp.

![Extra-large window with 2 panes and a side sheet acting as a third pane.](/assets/c03cd915-mp420iqc-07.BepBaHpI.webp)

1. Standard side sheet (third pane)

## Spacing

Large and extra-large 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/7025e7f0-mp5lfdh0-08.BTRURaT8.webp)

Use 24dp for margins and spacers in large and extra-large layouts

## Special considerations

Large and extra-large layouts will need to transition dynamically to a smaller layout when:

* The app goes from full-screen to split-screen
* Multi-window mode is initiated
* A free-form window is resized

Pay attention to typographic elements such as line length to ensure readability on large and extra-large layouts.

![An email app with 2 panes in a large layout.](/assets/80774795-mp42206a-09.CGled44u.webp)

Consider how a large layout should change at smaller breakpoints