DesignRef Logo
DesignRef
Design SystemsCompareQuick Ref
SearchK
Google
Material Design 3

Layout & Breakpoints

Window size classes define responsive behavior across device sizes, specifying column counts, margins, gutters, and navigation patterns.

5 size classesResponsive Grid
Supported Devices

Phone

Tablet

Desktop

All Design Systems

Material Design 3

OverviewColorsTypographySpacingShapeMotionStatesElevationBreakpointsTokensCustomizationContent DesignGlossaryComponentsSymbolsPatternsInputsApp IconsMaterialsSystemLocalizationAccessibilityPlatforms
OverviewColorsTypographySpacingShapeMotionStatesElevationBreakpointsTokensCustomizationContent DesignGlossaryComponentsSymbolsPatternsInputsApp IconsMaterialsSystemLocalizationAccessibilityPlatforms

Adaptive Layout System

Material Design 3 uses window size classes to create adaptive layouts that respond to different screen sizes:

  • Compact (0-599dp): Phone portrait, uses bottom navigation bar, 4-column grid
  • Medium (600-839dp): Phone landscape/tablets, uses navigation rail, 12-column grid
  • Expanded (840-1199dp): Tablets/small desktops, rail or drawer, 2 panes
  • Large (1200-1599dp): Desktop, standard navigation drawer, 2 panes
  • Extra Large (1600dp+): Large desktop, permanent drawer, up to 3 panes

Layout Preview

Compact (0–599dp)

4 columns • 1 pane • Navigation Bar

Interactive Responsive Layout Demo

Application Title
U
Home
Inbox
Calendar
Settings
Card 1
Card 2
Card 3
Card 4
Card 5
Card 6

Expanded Layout

Full navigation drawer with three-column content

> 840dp

Canonical Layouts

List-Detail

A two-pane layout where selecting an item from a list reveals its details. The list provides quick scanning and navigation while the detail pane shows comprehensive information.

┌─────────┬───────────────────┐
│  LIST   │      DETAIL       │
│ [Item]  │                   │
│ [Item]  │   Selected Item   │
│ [Item]  │     Content       │
│ [Item]  │                   │
└─────────┴───────────────────┘
Use Cases
Email clients (inbox + message)File managersSettings with sub-pagesProduct catalogsContact appsDocumentation browsers
Window Class Behavior
  • Compact: Single pane with navigation
  • Medium: List 1/3, Detail 2/3
  • Expanded+: List 33%, Detail 67%

Supporting Pane

A primary content area with a secondary supporting panel that provides context, tools, or related information. The supporting pane complements rather than replaces the main content.

┌───────────────────┬─────────┐
│                   │SUPPORTING│
│     PRIMARY       │  PANE   │
│     CONTENT       │         │
│                   │ Tools   │
│                   │ Props   │
└───────────────────┴─────────┘
Use Cases
Document editors (canvas + properties)Design toolsIDEs (code + inspector)Video editors (timeline + effects)Maps (map + location details)
Window Class Behavior
  • Compact: Supporting content in bottom sheet
  • Medium: Supporting pane slides over or modal
  • Expanded+: Fixed 360dp supporting pane

Feed

A single-column stream of content cards optimized for scrolling and consumption. Content flows vertically with consistent card widths, centered on larger screens.

┌─────────────────────────────┐
│         [CARD 1]            │
│         [CARD 2]            │
│         [CARD 3]            │
│         [CARD 4]            │
│            ···              │
└─────────────────────────────┘
Use Cases
Social media feedsNews readersBlog listsActivity streamsNotification centersComment threads
Window Class Behavior
  • Compact: Full-width cards
  • Medium: Centered cards with margins
  • Expanded+: Max-width 840dp, centered

Pane Strategies

Show/Hide

Conditionally display the secondary pane based on available space. On small screens, the pane is hidden and accessed through navigation or gestures. On larger screens, both panes are visible.

When to Use
  • When secondary content is optional
  • When full-screen focus on primary content is needed on mobile
  • When users frequently switch between focused and contextual views

Levitate

Float the secondary pane above the primary content as an overlay. This preserves the primary view while adding contextual information. Used with scrims on modal implementations.

When to Use
  • When secondary content needs occasional access
  • When preserving primary context is important
  • For temporary interactions like pickers or quick actions

Reflow

Change the layout orientation and arrangement based on available space. Panes may stack vertically on narrow screens and sit side-by-side on wider screens.

When to Use
  • When both panes are equally important
  • When the content relationship is flexible
  • For layouts that work at all sizes without hide/show logic

Window Size Classes

Compact

0–599dp

4 columns

Margins

16dp

Gutter

8dp

Navigation

Navigation

Panes

1

Medium

600–839dp

12 columns

Margins

24dp

Gutter

12dp

Navigation

Navigation

Panes

1

Expanded

840–1199dp

12 columns

Margins

24dp

Gutter

24dp

Navigation

Rail

Panes

2

Large

1200–1599dp

12 columns

Margins

24dp

Gutter

24dp

Navigation

Standard

Panes

2

Extra Large

1600dp+

12 columns

Margins

24dp

Gutter

24dp

Navigation

Permanent

Panes

3

Size ClassRangeColumnsMarginsGutterNavigationPanes
Compact0–599dp416dp8dpNavigation Bar1
Medium600–839dp1224dp12dpNavigation Rail1
Expanded840–1199dp1224dp24dpRail or Drawer2
Large1200–1599dp1224dp24dpStandard Drawer2
Extra Large1600dp+1224dp24dpPermanent Drawer3

Breakpoint Spectrum

Compact
Medium
Expanded
Large
Extra Large
0dp600dp840dp1200dp1600dp+