platform-guideline 3 linked patterns checked
Material Design Responsive Layout Grid
Documents responsive grid columns, gutters, margins, breakpoints, and layout behavior used to arrange card-based surfaces consistently across screen sizes.
Read with a purpose
What this source can teach
Use this source to understand a platform convention and the setting it was designed for.
- Start with the original. Open the source and find the guidance or example relevant to your task.
- Trace the connection. Use the claim notes below to see how this site applies the source to specific patterns.
- Check the setting. Compare the source's platform, people, and constraints with your own decision.
Pattern Decisions This Source Supports
| Pattern | Supported decision | Required contract | Claim note |
|---|---|---|---|
| Card grid | Choose card grid when users need to see multiple objects at once and visual preview or compact card identity helps them choose. | Each card represents one object and keeps title, preview, key metadata, state, and actions in the same relative positions across cards. | Supports responsive columns, gutters, margins, and breakpoint behavior for arranging card grids. |
| Dashboard layout | Choose dashboard layout when the user's task is monitoring or triaging multiple related signals on one page. | Dashboard title, purpose, active filters, and last updated time apply visibly to the widgets they govern. | Material documents responsive columns, gutters, margins, and breakpoints used to keep dashboard layouts orderly. |
| Responsive navigation adaptation | Choose responsive navigation adaptation when the navigation surface itself must change across viewport, posture, orientation, or destination-count constraints. | The adapted surface changes presentation, not the user's destination model. | Supports breakpoint and grid reasoning for responsive layout adaptation. |
Comparisons supported by this source
- Card grid vs card list vs collection vs table
Material responsive grid guidance supports column, gutter, margin, and breakpoint behavior for multi-column card layouts.
- Dashboard layout vs data visualization vs table vs saved view
Material documents responsive grid columns, gutters, margins, and breakpoints.
- Responsive navigation adaptation vs global navigation vs bottom navigation vs navigation drawer vs side navigation vs header
Supports breakpoint and layout-grid reasoning for responsive structure.
Evidence Role
This source is treated as platform-guideline evidence. Its value comes from the specific claims and setting described above.
Publisher: Google Material Design. Last checked: .