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.

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.

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.

Gutters can be adjusted to create more or less space between the columns of a layout.

Margins can be adjusted to create more or less space between content and the edge of the screen. Margins use a fixed value for each breakpoint.

The ideal length for legibility of body copy is 40-60 characters per line.

Within the same breakpoint, gutter and margin widths can be different from one another.

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.

Horizontal grids can be positioned to accommodate different heights, allowing space for app bars or other UI regions at the top.

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

Permanent UI regions are regions that can be displayed outside of the responsive grid, like a navigation drawer. These regions cannot be collapsed.

Persistent UI regions are regions that can be displayed upon command at any time, or they can remain visible. They can be toggled on or off, to appear or disappear. When they appear, they condense both content and the grid.

When a persistent UI region is visible, its visibility isn’t affected by interaction with other elements on screen.

Temporary UI regions appear temporarily, and when they do, they do not affect the responsive grid. When visible, they can be hidden by tapping an item in their region, or any space outside their region.

When a UI region is visible, other screen elements aren’t interactive.