The responsive layout grid is made up of three elements: columns, gutters, and margins.
All gutters and margins are measured with dp and depend on breakpoints.
Mobile, at a breakpoint of 360 dp
4 columns | Margin 16dp | Gutters 16dp
The body remains responsive to increases in size.
Small (tablet), a breakpoint from 600dp to 904dp
Small (tablet), a breakpoint from 905dp-1239dp
12 columns | Flexible margins (up to 200dp) | Gutters 12dp | Body width 840dp
Medium (laptop), a breakpoint from 1240dp-1439dp
12 columns | Margins 200dp| Gutters 16dp
Large (desktop), a breakpoint from 1440dp
12 columns | Flexible margins (up to 200dp) | Gutters 16dp | Body width 1040dp
Don’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.
Which grid to use?
All components align to an 8dp square baseline grid for mobile, tablet, and desktop.
Icons, type, and some elements within components can align to a 4dp grid. Type can be placed outside of the 4dp grid when it’s centered within a component, such as a button or list item.
Padding is an alternative spacing method to keylines and is measured in increments of 8dp or 4dp.
Keylines are an alignment tool that enables consistent placement of elements outside of the layout grid. They are vertical lines that show where elements are placed when they don’t align to the grid. Keylines are determined by each element’s distance from the edge of the screen and are measured in increments of 8dp. Keylines can expand or reduce the space between elements.
Touch targets should be at least 48 x 48 dp with at least 8dp of space between targets.