Responsive layout grid

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


Columns, gutters, and margins

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

Overlay of layout grid on app screen with app bar and cards
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.

In responsive layouts, column width is defined with percentages, rather than fixed values. This allows content to 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. A breakpoint can correspond with mobile, tablet, or other screen type.

Overlay of 4 columns on 360 dp breakpoint app screen
On mobile, at a breakpoint of 360 dp, this layout grid uses 4 columns.
Overlay of 8 columns on 600 dp breakpoint app screen
On tablet, at a breakpoint of 600 dp, 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,...

A gutter is the space between columns that helps separate content.

Gutter widths are fixed values at each breakpoint range. To better adapt to a given screen size, gutter widths can change at different breakpoints.

Wider gutters are more appropriate for larger screens, as they create more open space between columns.

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

Overlay of 24 dp gutters on 600 dp breakpoint app screen
On a tablet, at a breakpoint of 600 dp, 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 using fixed or scaling 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.

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

Grid customization

The layout grid can be adjusted to meet the needs of both your product and multiple 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.

Overlay of 8dp gutters on app screen with imagery
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.
Overlay of 32dp gutters on app screen with cards
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.
Overlay of 64dp gutters on app screen with cards
Don'tDon't make gutters too large or the same width as the columns. Oversized gutters won't leave enough room for content and may prevent a layout from appearing unified.

Gutters and margins

Within the same breakpoint, gutter and margin widths can be different from each other.

Within the same breakpoint, gutter and margin widths can be different from each other.

Overlay of 32dp margins and 8dp gutters on app screen with imagery
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,...

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.

Overlay of columns, gutters and margins on horizontally scrolling app screen with imagery
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.

Overlay layout grid starting below app bar on horizontally scrolling app screen with imagery
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 screen size threshold determined by specific layout requirements. At a given breakpoint range, the layout adjusts to suit the screen size and orientation.

Material Design provides responsive layouts based on 4-column, 8-column, and 12-column grids, 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 system

The responsive layout grid is primarily used to organize content and components in a layout’s body region.

The responsive layout grid is primarily used to organize content and components in a layout’s body region. Layout regions are described in detail in the Understanding layout guidance.

When scaling a layout for different screen sizes or orientations, the responsive grid adjusts margin and body widths as well as the number of columns in the layout.

Screen sizeMarginBodyLayout columns
Extra-small (phone)   
0-599dp16dpScaling4
Small (tablet)   
600-90432dpScaling8
905-1239Scaling840dp12
Medium (laptop)   
1240-1439200dpScaling12
Large (desktop)   
1440+Scaling104012

At extra small breakpoints, margins have a baseline value of 16dp. The body remains responsive to increases in size. Upon reaching the next larger breakpoint, small at 600dp wide), the margin increases to 32dp.

When the width of the body reaches 840dp, the margins become flexible and increase up to a maximum margin width of 200dp. After the maximum width is reached, the body region once again becomes responsive, continuing to scale horizontally. At large breakpoints, the body region can maintain a maximum width while margins again scale horizontally.


Layout anatomy

Layout regions are the foundation for a composition. They’re building blocks for a layout and are composed of elements and components that share similar functions. Layout regions can also be composed of other smaller containers as well.

A large screen layout structure is based on three main elements:

  • Body
  • Navigation
  • App bars

Diagram of a large-screen layout labeling 3 elements of its anatomy
1. App bars 2. Navigation 3. Body

Material Design’s responsive layout grid primarily informs the layout’s body region. Each of the three layout regions are described in detail in the Understanding layout guidance.

Up next