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. > ⚠️ The `Grid` component shouldn't be confused with a data grid; it is closer to a layout grid. For a data grid head to [the `DataGrid` component](/components/data-grid/). ## 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. If you are **new to or unfamiliar with flexbox**, we encourage you to read this [CSS-Tricks flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) guide. ## Spacing The responsive grid focuses on consistent spacing widths, rather than column width. Material Design margins and columns follow an **8px** square baseline grid. The spacing property is an integer between 0 and 10 inclusive. By default, the spacing between two grid items follows a linear function: `output(spacing) = spacing * 8px`, e.g. `spacing={2}` creates a 16px wide gap. This output transformation function can be customized [using the theme](/customization/spacing/). {{"demo": "pages/components/grid/SpacingGrid.js", "bg": true}} ## 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/components/grid/CenteredGrid.js", "bg": true}} ### Grid with breakpoints Some columns have multiple widths defined, causing the layout to change at the defined breakpoint. {{"demo": "pages/components/grid/FullWidthGrid.js", "bg": true}} ## Interactive Below is an interactive demo that lets you explore the visual results of the different settings: {{"demo": "pages/components/grid/InteractiveGrid.js", "hideToolbar": true, "bg": true}} ## 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/components/grid/AutoGrid.js", "bg": true}} ## 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/components/grid/ComplexGrid.js", "bg": true}} ## 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/components/grid/NestedGrid.js", "bg": true}} ## 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. Applying padding to the parent with at least half the spacing value applied to the child: ```jsx