Grid
The Material Design responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts.
The grid 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
Gridcomponent shouldn't be confused with a data grid; it is closer to a layout grid. For a data grid head to theDataGridcomponent.
How it works
The grid system is implemented with the Grid component:
- It uses CSS’s Flexible Box module 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.
- Integer values can be given to each breakpoint, indicating how many of the 12 available columns are occupied by the component when the viewport width satisfies the breakpoint contraints.
If you are new to or unfamiliar with flexbox, we encourage you to read this CSS-Tricks 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 prop value 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.
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
Column widths are integer values between 1 and 12; they apply at any breakpoint and indicate how many columns are occupied by the component.
A value given to a breakpoint applies to all the other breakpoints wider than it (unless overridden, as you can read later in this page). For example, xs={12} sizes a component to occupy the whole viewport width regardless of its size.
Grid with multiple breakpoints
Components may have multiple widths defined, causing the layout to change at the defined breakpoint. Width values given to larger breakpoints override those given to smaller breakpoints.
For example, xs={12} sm={6} sizes a component to occupy half of the viewport width (6 columns) when viewport width is 600 or more pixels. For smaller viewports, the component fills all 12 available columns.
Interactive
Below is an interactive demo that lets you explore the visual results of the different settings:
<Grid
container
direction="row"
justifyContent="center"
alignItems="center"
>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.
Complex Grid
The following demo doesn't follow the Material Design specification, but illustrates how the grid can be used to build complex layouts.
Full resolution 1920x1080 • JPEG
ID: 1030114
Remove
Nested Grid
The container and item props are two independent booleans; they can be combined to allow a Grid component to be both a flex container, and child.
A flex container is the box generated by an element with a computed display of
flexorinline-flex. In-flow children of a flex container are called flex items and are laid out using the flex layout model.
<Grid container spacing={1}>
<Grid container item spacing={3}>
<FormRow />
</Grid>
<Grid container item spacing={3}>
<FormRow />
</Grid>
<Grid container item spacing={3}>
<FormRow />
</Grid>
</Grid>⚠️ Defining an explicit width to a Grid element that is flex container, flex item, and has spacing at the same time lead to unexpected behavior, avoid doing it:
<Grid spacing={1} container item xs={12}>If you need to do such, remove one of the props.
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 <body>.
There are 3 available workarounds:
Not using the spacing feature and implementing it in user space
spacing={0}(default).Applying padding to the parent with at least half the spacing value applied to the child:
<body> <div style={{ padding: 20 }}> <Grid container spacing={5}> //... </Grid> </div> </body>Adding
overflow-x: hidden;to the parent.
white-space: nowrap;
The initial setting on flex items is min-width: auto.
It's causing a positioning conflict when the children is using white-space: nowrap;.
You can experience the issue with:
<Grid item xs>
<Typography noWrap>In order for the item to stay within the container you need to set min-width: 0.
In practice, you can set the zeroMinWidth prop:
<Grid item xs zeroMinWidth>
<Typography noWrap>Truncation should be conditionally applicable on this long line of text as this is a much longer line than what the container can support.
Truncation should be conditionally applicable on this long line of text as this is a much longer line than what the container can support.
Truncation should be conditionally applicable on this long line of text as this is a much longer line than what the container can support.
direction: column | column-reverse
The xs, sm, md, lg, and xl props are not supported within direction="column" and direction="column-reverse" containers.
They define the number of grids the component will use for a given breakpoint. They are intended to control width using flex-basis in row containers but they will impact height in column containers.
If used, these props may have undesirable effects on the height of the Grid item elements.
CSS Grid Layout
Material-UI doesn't provide any CSS Grid functionality itself, but as seen below you can easily use CSS Grid to layout your pages.