The Material Design responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts.
The [grid](https://material.io/design/layout/responsive-layout-grid.html) creates visual consistency between layouts while allowing flexibility across a wide variety of designs. Material Design’s responsive UI is based on a 12-column grid layout. ## How it works The grid system is implemented with the `Grid` component: - It uses [CSS’s Flexible Box module](https://www.w3.org/TR/css-flexbox-1/) for high flexibility. - There are two types of layout: *containers* and *items*. - Item widths are set in percentages, so they’re always fluid and sized relative to their parent element. - Items have padding to create the spacing between individual items. - There are five grid breakpoints: xs, sm, md, lg, and xl. ## Spacing The responsive grid focuses on consistent spacing widths, rather than column width. Material design margins and columns follow an **8dp** square baseline grid. Spacing can be 8, 16, 24, 32 or 40dp wide. {{"demo": "pages/layout/grid/SpacingGrid.js"}} ## 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. ### Basic grid The column widths apply at all breakpoints (i.e. `xs` and up). {{"demo": "pages/layout/grid/CenteredGrid.js"}} ### Grid with breakpoints Some columns have multiple widths defined, causing the layout to change at the defined breakpoint. {{"demo": "pages/layout/grid/FullWidthGrid.js"}} ## Interactive Below is an interactive demo that lets you explore the visual results of the different settings: {{"demo": "pages/layout/grid/InteractiveGrid.js"}} ## Auto-layout The Auto-layout makes the *items* equitably share the available space. That also means you can set the width of one *item* and the others will automatically resize around it. {{"demo": "pages/layout/grid/AutoGrid.js"}} ## CSS Grid Layout **CSS Grid Layout** excels at dividing a page into major regions, or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives. Unfortunately, CSS grid is only supported by the most recent browsers. {{"demo": "pages/layout/grid/CSSGrid.js"}} ## Nested Grid The `container` and `item` properties are two independent booleans. They can be combined. > A flex **container** is the box generated by an element with a computed display of `flex` or `inline-flex`. In-flow children of a flex container are called flex **items** and are laid out using the flex layout model. https://www.w3.org/TR/css-flexbox-1/#box-model {{"demo": "pages/layout/grid/NestedGrid.js"}} ## Complex Grid The following demo doesn't follow the Material Design specification, but illustrates how the grid can be used to build complex layouts. {{"demo": "pages/layout/grid/ComplexGrid.js"}} ## Limitations ### Negative margin There is one limitation with the negative margin we use to implement the spacing between items. A horizontal scroll will appear if a negative margin goes beyond the ``. There are 3 available workarounds: 1. Not using the spacing feature and implementing it in user space `spacing={0}` (default). 2. Adding a padding on the parent with, at least, the spacing value: ```jsx