Columns, gutters, and margins
The Material Design layout grid is made up of three elements: columns, gutters, and margins.

1. Columns
2. Gutters
3. Margins
Columns
Content is placed in the areas of the screen that contain columns. Column width is defined using percentages, rather than fixed values, to allow content...
Content is placed in the areas of the screen that contain columns.
Column width is defined using percentages, rather than fixed values, to allow content to flexibly adapt to any screen size. The number of columns displayed in the grid is determined by the breakpoint range (a range of predetermined screen sizes) at which a screen is viewed, whether it’s a breakpoint for mobile, tablet, or another size.

On mobile, at a breakpoint of 360dp, this layout grid uses 4 columns.

On tablet, at a breakpoint of 600dp, this layout grid uses 8 columns.
Gutters
Gutters are the spaces between columns. They help separate content. Gutter widths are fixed values at each breakpoint range. To better adapt to the screen,...
Gutters are the spaces between columns. They help separate content.
Gutter widths are fixed values at each breakpoint range. To better adapt to the screen, gutter width can change at different breakpoints. Wider gutters are more appropriate for larger screens, as they create more whitespace between columns.

On mobile, at a breakpoint of 360dp, this layout grid uses 16dp gutters.

On tablet, at a breakpoint of 600dp, this layout grid uses 24dp gutters.
Margins
Margins are the space between content and the left and right edges of the screen. Margin widths are defined as fixed values at each breakpoint...
Margins are the space between content and the left and right edges of the screen.
Margin widths are defined as fixed values at each breakpoint range. To better adapt to the screen, the margin width can change at different breakpoints. Wider margins are more appropriate for larger screens, as they create more whitespace around the perimeter of content.

On mobile, at a breakpoint of 360dp, this layout grid uses 16dp margins.

On a small tablet, at a breakpoint of 600dp, this layout grid uses 24dp margins.
Grid customization
The layout grid can be adjusted to meet the needs of both your product and various device sizes.
Customizing gutters
Gutters can be adjusted to create more or less space between the columns of a layout.
Gutters can be adjusted to create more or less space between the columns of a layout.

This layout grid uses 8dp gutters. The tighter spacing may suggest the images are closely related to one another, so that they are perceived as part of a collection.

This layout grid uses larger, 32dp gutters to create more separation between columns. The extra space helps each album to be perceived as an individual entity within a collection.

Don’t.
Don’t make gutters too large, such as the same width as the columns. Too much space doesn’t leave enough room for content and prevents it from appearing unified.
Customizing margins
Margins can be adjusted to create more or less space between content and the edge of the screen. Margins use a fixed value for each...
Margins can be adjusted to create more or less space between content and the edge of the screen. Margins use a fixed value for each breakpoint.
The ideal length for legibility of body copy is 40-60 characters per line.

This layout grid uses small, 8dp margins to allow images to take up more space in the layout.

This layout grid uses large, 64dp margins to limit the width of content.

Don’t.
Don’t make margins so large that there isn’t sufficient room for content.
Gutters and margins
Within the same breakpoint, gutter and margin widths can be different from one another.
Within the same breakpoint, gutter and margin widths can be different from one another.

- 32dp margins
- 8dp gutters
Horizontal grids
The Material Design layout grid can be customized for touch UIs that scroll horizontally. Columns, gutters, and margins are laid out from left to right,...
The Material Design layout grid can be customized for touch UIs that scroll horizontally. Columns, gutters, and margins are laid out from left to right, rather than top to bottom. The height of the screen determines the number of columns in a horizontal grid.
Horizontally scrolling UIs are uncommon on non-touch and web platforms.

This horizontal layout grid uses four horizontal columns, for a total layout height of 400dp.
- Columns
- Gutters
- Margins
Horizontal grids can be positioned to accommodate different heights, allowing space for app bars or other UI regions at the top.

This horizontal layout grid starts below the Top App Bar component and uses four horizontal columns at a height of 316dp.
Breakpoints
A breakpoint is the range of predetermined screen sizes that have specific layout requirements. At a given breakpoint range, the layout adjusts to suit the screen size and orientation.
Breakpoint system
Material Design provides responsive layouts based on the following column structures. Layouts using 4-column, 8-column, and 12-column grids are available for use across different screens,...
Material Design provides responsive layouts based on the following column structures. Layouts using 4-column, 8-column, and 12-column grids are available for use across different screens, devices, and orientations.
Each breakpoint range determines the number of columns, and recommended margins and gutters, for each display size.
Breakpoint Range (dp) | Portrait | Landscape | Window | Columns | Margins / Gutters* |
0 – 359 | small handset | xsmall | 4 | 16 | |
360 – 399 | medium handset | xsmall | 4 | 16 | |
400 – 479 | large handset | xsmall | 4 | 16 | |
480 – 599 | large handset | small handset | xsmall | 4 | 16 |
600 – 719 | small tablet | medium handset | small | 8 | 16 |
720 – 839 | large tablet | large handset | small | 8 | 24 |
840 – 959 | large tablet | large handset | small | 12 | 24 |
960 – 1023 | small tablet | small | 12 | 24 | |
1024 – 1279 | large tablet | medium | 12 | 24 | |
1280 – 1439 | large tablet | medium | 12 | 24 | |
1440 – 1599 | large | 12 | 24 | ||
1600 – 1919 | large | 12 | 24 | ||
1920 + | xlarge | 12 | 24 |
*Margins and gutters are flexible and don’t need to be of equal size.
iOS breakpoints
The following column numbers, and margin and gutter widths, apply to breakpoints for screens, devices, orientations, and widths on iOS. Device Orientation Vertical Size Category...
The following column numbers, and margin and gutter widths, apply to breakpoints for screens, devices, orientations, and widths on iOS.
Device | Orientation | Vertical Size Category | Horizontal Size Category | Columns | Margins/ Gutters* |
iPhone | Portrait | Regular | Compact | 4 | 16 |
iPhone | Landscape | Compact | Compact | 4 | 16 |
iPhone Plus | Portrait | Regular | Compact | 4 | 16 |
iPhone Plus | Landscape | Compact | Regular | 4 | 16 |
iPad | Portrait | Regular | Regular | 8 | 16 |
iPad | Landscape | Regular | Regular | 8 | 24 |
iPad - Even Split Multitasking | Portrait | Regular | Compact | 12 | 24 |
iPad - Even Split Multitasking | Landscape | Regular | Compact | 12 | 24 |
iPad - 2/3 Split Multitasking | Portrait | Regular | Compact | 12 | 24 |
iPad - 2/3 Split Multitasking - First App | Landscape | Regular | Regular | 12 | 24 |
iPad - 2/3 Split Multitasking - Second App | Landscape | Regular | Compact | 12 | 24 |
iPad Pro - Even Split Multitasking | Portrait | Regular | Compact | 12 | 24 |
iPad Pro 13in - Even Split Multitasking | Landscape | Regular | Regular | 12 | 24 |
*Margins and gutters are flexible values and don’t need to be equal within the Material Design grid system.
Grid behavior
Fluid grids
Fluid grids use columns that scale and resize content. A fluid grid’s layout can use breakpoints to determine if the layout needs to change dramatically.
Fluid grids use columns that scale and resize content. A fluid grid’s layout can use breakpoints to determine if the layout needs to change dramatically.

Columns expanding in a full-width grid
Fixed grids
Fixed grids use columns of a fixed size, with fluid margins to keep content unchanging within each breakpoint range. A fixed grid’s layout can only...
Fixed grids use columns of a fixed size, with fluid margins to keep content unchanging within each breakpoint range. A fixed grid’s layout can only change at an assigned breakpoint.

Margins expanding in a fixed grid
UI regions
A layout is made up of several UI regions, such as side navigation, content areas, and app bars. These regions can display actions, content, or navigation destinations. UI regions should be consistent across devices, while adapting to different breakpoints of different screen sizes.
To increase familiarity across devices, UI elements designed for desktop should be organized in a way that’s consistent with the mobile UI.

Layout changes on different-sized screens
Permanent UI regions
Permanent UI regions are regions that can be displayed outside of the responsive grid, like a navigation drawer. These regions cannot be collapsed.
Permanent UI regions are regions that can be displayed outside of the responsive grid, like a navigation drawer. These regions cannot be collapsed.

When screen space is available, a permanent UI region exposes content.
Persistent UI regions
Persistent UI regions are regions that can be displayed upon command at any time, or they can remain visible. They can be toggled on or...
Persistent UI regions are regions that can be displayed upon command at any time, or they can remain visible. They can be toggled on or off, to appear or disappear. When they appear, they condense both content and the grid.
When a persistent UI region is visible, its visibility isn’t affected by interaction with other elements on screen.

When open, this persistent navigation drawer causes the grid (and its content) to condense.
Temporary UI regions
Temporary UI regions appear temporarily, and when they do, they do not affect the responsive grid. When visible, they can be hidden by tapping an...
Temporary UI regions appear temporarily, and when they do, they do not affect the responsive grid. When visible, they can be hidden by tapping an item in their region, or any space outside their region.
When a UI region is visible, other screen elements aren’t interactive.

When open, this temporary navigation drawer doesn’t affect the responsive grid or screen content.
Whiteframes
Whiteframes are structured layouts that provide a consistent approach to layout, layering, and shadows. They are a starting point, meant to be modified to meet the specific needs of a product.

1. Mobile
2. Desktop

1. Mobile
2. Desktop