Grid and layout

This is based on a fluid layout. Its pretty simple after you subtract the margin of 32px on each side, the remaining area can be divided into 12 with a gutter width of 24px (see below)

Columns, gutters, and margins

Columns - (Purple)

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.

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.

Margins - (Green)

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.

Gutter - (Blue)

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.

Examples

Mobile

Use a breakpoint of 360 dp, this layout grid uses 4 columns and 16dp margins.

Tablet

Use a breakpoint of 600 dp, this layout grid uses 8 columns and 24dp margins.

Desktop (1024, 1440, 1920)

Use a breakpoint of 1024 and more dp, this layout grid uses 12 columns and 24dp margins.

Grid behaviour

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.

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.

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

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.

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

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

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