GridLegacy

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

Thegrid 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 theGridLegacy component:

• It usesCSS's Flexible Box module for high flexibility.
• There are two types of layout:containers anditems.
• 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 thebreakpoint constraints.

If you arenew to or unfamiliar with flexbox, we encourage you to read thisCSS-Tricks flexbox guide.

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 passed to any given breakpoint also applies to all wider breakpoints (if they have no values explicitly defined).For example,xs={12} sizes a component to occupy the full width of its parent container, regardless of the viewport 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 is600 or more pixels. For smaller viewports, the component fills all 12 available columns.

Spacing

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

Row & column spacing

TherowSpacing andcolumnSpacing props allow for specifying the row and column gaps independently.It's similar to therow-gap andcolumn-gap properties ofCSS 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.

Responsive values is supported by:

• columns
• columnSpacing
• direction
• rowSpacing
• spacing
• all theother props of MUI System

<Gridcontainercolumns={{xs:4,md:12}}><Griditemxs={2}/></Grid>

Interactive

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

Auto-layout

The Auto-layout makes theitems equitably share the available space.That also means you can set the width of oneitem and the others will automatically resize around it.

Variable width content

Set one of the size breakpoint props to"auto" instead oftrue / anumber to sizea column based on the natural width of its content.

Complex Grid

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

Nested Grid

Thecontainer anditem props are two independent booleans; they can be combined to allow a Grid component to be both a flex container and child.

https://www.w3.org/TR/css-flexbox-1/#box-model

⚠️ Defining an explicit width to a Grid element that is flex container, flex item, and has spacing at the same time leads to unexpected behavior, avoid doing it:

<Gridspacing={1}containeritemxs={12}>

If you need to do such, remove one of the props.

Columns

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

Limitations

Negative margin

The spacing between items is implemented with a negative margin. This might lead to unexpected behaviors. For instance, to apply a background color, you need to applydisplay: flex; to the parent.

white-space: nowrap

The initial setting on flex items ismin-width: auto.This causes a positioning conflict when children usewhite-space: nowrap;.You can reproduce the issue with:

<Griditemxs><TypographynoWrap>

In order for the item to stay within the container you need to setmin-width: 0.In practice, you can set thezeroMinWidth prop:

<GriditemxszeroMinWidth><TypographynoWrap>

direction: column | column-reverse

Thexs,sm,md,lg, andxl props arenot supported withindirection="column" anddirection="column-reverse" containers.

They define the number of grids the component will use for a given breakpoint. They are intended to controlwidth usingflex-basis inrow containers but they will impact height incolumn containers.If used, these props may have undesirable effects on the height of theGridLegacy item elements.

CSS Grid Layout

TheGridLegacy component is using CSS flexbox internally.But as seen below, you can easily useMUI System and CSS Grid to layout your pages.

System props

- <Grid item p={2} />+ <Grid item sx={{ p: 2 }} />

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

• <GridLegacy />