Responsive layout grid

The Material Design responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts.


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...

Read More

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,...

Read More

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...

Read More

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.

Read More

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...

Read More

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.

Read More

Within the same breakpoint, gutter and margin widths can be different from one another.

  1. 32dp margins
  2. 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,...

Read More

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.

  1. Columns
  2. Gutters
  3. 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,...

Read More

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...

Read More

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.

Read More

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...

Read More

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.

Read More

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...

Read More

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...

Read More

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. Desktop


2. Mobile


1. Desktop


2. Mobile