Breakpoints
For optimal user experience, material design user interfaces should adapt layouts for the following breakpoint widths: 480, 600, 840, 960, 1280, 1440, and 1600dp.
Preview Material Design breakpoints with this interactive viewer across desktop, mobile, and tablet
1. Summary and detail view content in layouts
- Layouts under 600dp wide may fill the screen with a single level of content hierarchy (either summary or detail content, but not both)
- Layouts over 600dp wide may place two levels of content hierarchy on the screen (both summary and detail content)
2. Max screen widths
Layouts over 1600dp wide may let the layout grow until it hits a max width. At this point, the grid may do one of the following:
- Become center aligned with increased margins
- Remain left aligned while the right margin grows
- Continue to grow while revealing additional content
Breakpoint system
These breakpoints describe column and width specifications for different screens, devices, and orientations.
For some measurements, the values remain the same even if a device is rotated. For that reason the smallest width in either orientation is the defining value.
* 16dp when the smallest width of the device is <600
** Desktop breakpoints are 16dp below the listed values to accommodate variations in browser chrome.
Breakpoint (dp) | Handset / Tablet Portrait | Handset / Tablet Landscape | Window | Columns | Gutter |
small handset | xsmall | 4 | 16 | ||
360 | medium handset | xsmall | 4 | 16 | |
400 | large handset | xsmall | 4 | 16 | |
480 | large handset | small handset | xsmall | 4 | 16 |
600 | small tablet | medium handset | small | 8 | 16/24* |
720 | large tablet | large handset | small | 8 | 16/24* |
840 | large tablet | large handset | small | 12 | 16/24* |
960 | small tablet | small | 12 | 24 | |
1024** | large tablet | medium | 12 | 24 | |
1280** | large tablet | medium | 12 | 24 | |
1440** | large | 12 | 24 | ||
1600** | large | 12 | 24 | ||
1920** | xlarge | 12 | 24 |
Grid
Material design’s responsive UI is based on a 12-column grid layout. This grid creates visual consistency between layouts, while allowing flexibility across a wide variety of designs. The number of grid columns varies based on the breakpoint system.
Margins and Gutters
The responsive grid focuses on consistent margin and gutter widths, rather than column width. Material design margins and columns follow an 8dp square baseline grid. Margins and gutters can be 8, 16, 24, or 40dp wide.
Margins and gutters don’t need to be equal. For example, it’s acceptable to use 40dp margins and 24dp gutters in the same layout.
- 8dp margins and gutters
- 16dp margins and gutters
- 24dp margins and gutters
- 40dp margins and gutters
- 40dp margins and 24dp gutters
Full-width vs Centered
Full-width grids use fluid columns and breakpoints to determine when a layout needs to change.
Centered grids use fixed columns and reflow the layout when all columns (plus a defined margin) no longer fit on screen.
- Full-width grids
- Centered grids
Panel Influence on the Grid
As defined in Navigation patterns, the side nav may be permanent, persistent, or temporary. These behaviors apply to any panel, not just a side nav.
Permanent
A permanent panel exists outside of the responsive grid. The panel appears at a defined breakpoint (when the screen can accommodate the panel) and squeezes content. There are no controls to show/hide the panel.
Side panel effects on the grid
This animation happens in two phases:
- A persistent side panel appears, squeezing both content and the grid. Content is accessible while the panel remains visible. The panel hides upon toggling.
- A temporary side panel appears, pushing grid content off-screen. Touching either outside the panel, or an item inside the panel, hides the panel.
Temporary overlay
A temporary panel does not affect the grid or content when off-screen. When toggled to be visible, it can be hidden again by touching anywhere outside the panel or an item inside the panel.
Surface behaviors
When a screen size changes, the UI adapts using the following surface-specific behaviors.
Visibility
Behavior | Definition |
Permanent | When screen space is available, a surface is always visible. |
Persistent | Surface visibility can be toggled between visible and hidden. When visible, interacting with other elements on the screen does not change visibility. |
Temporary | Surface visibility can be toggled between visible and hidden. When visible, interacting with other elements on the screen toggles the surface to become hidden or minimized. |
Width
Behavior | Definition |
Fixed | Element width stays the same when screen size changes. |
Fluid | Element width grows as screen size changes. |
Sticky | Element width is fixed until influenced by another element or breakpoint. |
Squeeze | Element width contracts as a panel is revealed |
Push | Element width stays the same, its position changes horizontally as a panel appears, and it may be partially occluded by a screen’s edge. |
Overlay | Element width and position stays the same as a panel appears over content. |
Descriptors
Behavior | Definition |
Above, Below | The y position of an element. |
Over, Under | The z position of an element in motion. |
In Front, Behind | The static z position of an element. |
Left, Right, Centered | The x position of an element |
Top, Bottom | The y position of an element and its position relative to a screen edge. |
Flat, Raised | The z position, and shadow of an element. A flat element will have no shadow. |
Inset, Full Bleed | The padding of an image or element |
Summary, Detail | A content summary, and the full expansion of the summary |
Patterns
As screen space increases, the following responsive patterns may be applied:
- Reveal
- Transform
- Divide
- Reflow
- Expand
- Position
Reveal
UI hidden by smaller screens may be revealed with increased available space.
Transform
A UI element may transform from one format to another.
Divide
A layered UI may be divided into newly available space.
Reflow
A UI may reflow into available space.
Expand
The UI may expand across more space.
Position
The position of UI components may change to more appropriate locations.
