Grids layout in Material design system

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

Dont’s

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. 

Spacing

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.

Aspect ratios

Source: Material.io

Touch targets

Source: Material.io

Touch targets should be at least 48 x 48 dp with at least 8dp of space between targets.

 

(Visited 17 times, 1 visits today)

Leave a comment

Your email address will not be published. Required fields are marked *