Understanding layout

Material Design layouts encourage consistency across platforms, environments, and screen sizes by using uniform elements and spacing.


Principles

Use intuitive and predictable layouts with consistent UI regions and spatial organization. Layouts should be consistent in the use of grids, keylines, and padding. Layouts...

Read More

Predictable

Use intuitive and predictable layouts with consistent UI regions and spatial organization.

Consistent

Layouts should be consistent in the use of grids, keylines, and padding.

Responsive

Layouts are adaptive and they react to input from a user, a device, and screen elements.

Material measurements

Material Design layouts are visually balanced. Most measurements align to an 8dp grid applied, which aligns both spacing and the overall layout. Smaller components, such...

Read More

Material Design layouts are visually balanced. Most measurements align to an 8dp grid applied, which aligns both spacing and the overall layout.

Smaller components, such as icons and type, can align to a 4dp grid.

Chart of dp units from 0 to 80 in increments of 4

8dp and 4dp units

Responsive layout grid

The Material Design responsive layout grid is an overarching guide to the placement of components and elements. The responsive layout grid adapts to screen sizes...

Read More

The Material Design responsive layout grid is an overarching guide to the placement of components and elements. The responsive layout grid adapts to screen sizes and orientation, ensuring consistency across layouts.

Layout diagram showing columns, gutters, and margins

1. Columns

2. Gutters

3. Margins