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.

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.

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.

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).

xs=12

xs=6

xs=3

Grid with breakpoints

Some columns have multiple widths defined, causing the layout to change at the defined breakpoint.

xs=12

xs=12 sm=6

xs=6 sm=3

Interactive

Below is an interactive demo that lets you explore the visual results of the different settings:

Cell 1

Cell 2

Cell 3

<Grid
  container
  direction="row"
  justify="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.

xs=6

Complex Grid

The following demo doesn't follow the Material Design specification, but illustrates how the grid can be used to build complex layouts.

Standard license

Full resolution 1920x1080 • JPEG

ID: 1030114

Remove

$19.00

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.

Material-UI Grid:

xs=3

xs=8

xs=4

CSS Grid Layout:

xs=3

xs=8

xs=4

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

item

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={40}>
     //...
   </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 property:

<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.

API

<Grid />