Grid

The responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts.

The Grid component works well for a layout with known columns. The columns can be configured in multple breakpoints which you have to specify the column span of each child.

How it works

The grid system is implemented with the Grid component:

It uses CSS's Flexible Box module for high flexibility.
The grid is always a flex item. Use the container prop to add flex container to it.
Item widths are set in percentages, so they're always fluid and sized relative to their parent element.
There are five default grid breakpoints: xs, sm, md, lg, and xl. If you need custom breakpoints, check out custom breakpoints grid.
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 constraints.
It uses negative margin and padding technique to create gap-like between children.
It does not have the concept of rows. Meaning, you can't make the children span to multiple rows. If you need to do that, we recommend to use CSS Grid instead.
It does not offer auto-placement children feature. It will try to fit the children one by one and if there is not enough space, the rest of the children will start on the next line and so on. If you need the auto-placement feature, we recommend to use CSS Grid instead.

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

In order to create a grid layout, you need a container. Use container prop to create a grid container that wraps the grid items (the Grid is always an item).

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.

xs=8

xs=4

xs=8

<Grid container spacing={2}>
  <Grid xs={8}>
    <Item>xs=8</Item>
  </Grid>
  <Grid xs={4}>
    <Item>xs=4</Item>
  </Grid>
  <Grid xs={4}>
    <Item>xs=4</Item>
  </Grid>
  <Grid xs={8}>
    <Item>xs=8</Item>
  </Grid>
</Grid>

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.

xs=6 md=8

xs=6 md=4

xs=6 md=8

<Grid container spacing={2}>
  <Grid xs={6} md={8}>
    <Item>xs=6 md=8</Item>
  </Grid>
  <Grid xs={6} md={4}>
    <Item>xs=6 md=4</Item>
  </Grid>
  <Grid xs={6} md={4}>
    <Item>xs=6 md=4</Item>
  </Grid>
  <Grid xs={6} md={8}>
    <Item>xs=6 md=8</Item>
  </Grid>
</Grid>

Spacing

To control space between children, use the spacing prop. The spacing value can be any positive number, including decimals and any string. The prop is converted into a CSS property using the theme.spacing() helper.

Row & column spacing

The rowSpacing and columnSpacing props allow for specifying the row and column gaps independently. It's similar to the row-gap and column-gap properties of CSS Grid.

<Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
  <Grid xs={6}>
    <Item>1</Item>
  </Grid>
  <Grid xs={6}>
    <Item>2</Item>
  </Grid>
  <Grid xs={6}>
    <Item>3</Item>
  </Grid>
  <Grid xs={6}>
    <Item>4</Item>
  </Grid>
</Grid>

Responsive values

You can switch the props' value based on the active breakpoint. For instance, we can implement the recommended responsive layout grid of Material Design.

<Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}>
  {Array.from(Array(6)).map((_, index) => (
    <Grid xs={2} sm={4} key={index}>
      <Item>{index + 1}</Item>
    </Grid>
  ))}
</Grid>

Responsive values is supported by:

columns
columnSpacing
direction
rowSpacing
spacing
all the other props of the system

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

<Grid container spacing={3}>
  <Grid xs>
    <Item>xs</Item>
  </Grid>
  <Grid xs={6}>
    <Item>xs=6</Item>
  </Grid>
  <Grid xs>
    <Item>xs</Item>
  </Grid>
</Grid>

Variable width content

Set one of the size breakpoint props to "auto" instead of true / a number to size a column based on the natural width of its content.

Variable width item

xs=6

<Grid container spacing={3}>
  <Grid xs="auto">
    <Item>Variable width item</Item>
  </Grid>
  <Grid xs={6}>
    <Item>xs=6</Item>
  </Grid>
  <Grid xs>
    <Item>xs</Item>
  </Grid>
</Grid>

Nested Grid

The grid container that renders inside another grid container is a nested grid which inherits the columns and spacing from the top. The deep nested grid will inherit the props from the upper nested grid if it receives those props.

Email subscribe section

Category A

Link 1.1
Link 1.2
Link 1.3

Category B

Link 2.1
Link 2.2
Link 2.3

Category C

Link 3.1
Link 3.2
Link 3.3

Category D

Link 4.1
Link 4.2
Link 4.3

Link A

Link B

Link C

Columns

You can change the default number of columns (12) with the columns prop.

xs=8

<Grid container spacing={2} columns={16}>
  <Grid xs={8}>
    <Item>xs=8</Item>
  </Grid>
  <Grid xs={8}>
    <Item>xs=8</Item>
  </Grid>
</Grid>

Offset

Move the item to the right by using offset props which can be:

number, for example, mdOffset={2} - when used the item is moved to the right by 2 columns starts from md breakpoint and up.
"auto" - when used, the item is moved to the right edge of the grid container.

<Grid container spacing={3} sx={{ flexGrow: 1 }}>
  <Grid xs={6} xsOffset={3} md={2} mdOffset={0}>
    <Item>1</Item>
  </Grid>
  <Grid xs={4} md={2} mdOffset="auto">
    <Item>2</Item>
  </Grid>
  <Grid xs={4} xsOffset={4} md={2} mdOffset={0}>
    <Item>3</Item>
  </Grid>
  <Grid xs md={6} mdOffset={2}>
    <Item>4</Item>
  </Grid>
</Grid>

Custom breakpoints

If you specify custom breakpoints to the theme, you can use those names as grid item props in responsive values.

TypeScript

You have to set module augmentation on the theme breakpoints interface. The properties with true value will appear as {key}(size prop) and {key}Offset(offset prop).

declare module '@mui/system' {
  interface BreakpointOverrides {
    // Your custom breakpoints
    laptop: true;
    tablet: true;
    mobile: true;
    desktop: true;
    // Remove default breakpoints
    xs: false;
    sm: false;
    md: false;
    lg: false;
    xl: false;
  }
}

Prevent scrollbar

If you use grid as a container in a small viewport, you might see a horizontal scrollbar because the negative margin is applied on all sides of the grid container.

To prevent the scrollbar, set disableEqualOverflow prop to true. It will enable negative margin only on the top and left sides of the grid which remove overflow on the right-hand side.

Scroll bar appears

`disableEqualOverflow` prevents scrollbar

Limitations

direction column and column-reverse

The column width (xs, ..., xl) and offset 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.