Columns, gutters, and margins
The responsive layout grid is made up of three elements: columns, gutters, and margins.
Grid customization
The layout grid can be adjusted to meet the needs of both your product and multiple device sizes.
Breakpoints
A breakpoint is the screen size threshold determined by specific layout requirements. At a given breakpoint range, the layout adjusts to suit the screen size and orientation.
Material Design provides responsive layouts based on 4-column, 8-column, and 12-column grids, 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.
Layout anatomy
Layout regions are the foundation for a composition. They’re building blocks for a layout and are composed of elements and components that share similar functions. Layout regions can also be composed of other smaller containers as well.
A large screen layout structure is based on three main elements:
- Body
- Navigation
- App bars
Material Design’s responsive layout grid primarily informs the layout’s body region. Each of the three layout regions are described in detail in the Understanding layout guidance.