The MUI Grid container can have full width and height styling applied with only a few lines of code. The default width behavior is for the Grid container to expand to 100% of its parent. The height only needs a height set in its sx prop.
I’ll create two tutorials with full code for setting Grid container size. I also include lots of additional code for styling the Grid and the Grid items.
The Resources section contains links to more MUI Grid content.
View a video version of this post on YouTube or watch below:
Material-UI Grid Container Full Width
The MUI Grid container by default expands to fill the width of its parent element. This means we can create a full width Grid container by creating a full width parent.
Notice the width calculation for the Grid container in the screenshot below. This is the default width styling. The parent div has full viewport width.
The code for this example is below. I set 100vw width on the parent div, but the FullWidthGrid component doesn’t have any width set on it.
<div style={{ width: "100vw", height: "100vh", display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
<FullWidthGrid />
</div>
//FullWidthGrid code
import { styled } from "@mui/material/styles";
import Paper from "@mui/material/Paper";
import Grid from "@mui/material/Grid";
const gridStyles = {
backgroundColor: "gray",
marginLeft: "auto",
marginRight: "auto",
paddingRight: 1,
paddingBottom: 1
};
const Contents = styled(Paper)(({ theme }) => ({
...theme.typography.h6,
padding: theme.spacing(1),
textAlign: "center"
}));
export default function FullWidthGrid() {
return (
<Grid
container
spacing={1}
sx={{ ...gridStyles }}
>
<Grid item xs={6}>
<Contents >Item 1</Contents>
</Grid>
<Grid item xs={6}>
<Contents >Item 2</Contents>
</Grid>
<Grid item xs={6}>
<Contents>Item 3</Contents>
</Grid>
<Grid item xs={6}>
<Contents >Item 4</Contents>
</Grid>
</Grid>
);
}
Material-UI Grid Container Full Height
The MUI Grid container can have easily have full height by setting the height value in the sx prop. Here’s an example code snippet:
<Grid container sx={{height: '100%'}}/>I created the example below where a Grid container is set to full height. I decided to vertically center the items inside the Grid.
This meant the inner Grid items needed the container value as well. This applied display: 'flex' to the children. I then set a flexGrow value on the contents inside each Grid item so that they would have take up the full horizontal space.
Here’s the code for this example:
import { styled } from "@mui/material/styles";
import Paper from "@mui/material/Paper";
import Grid from "@mui/material/Grid";
const gridStyles = {
backgroundColor: "gray",
marginLeft: "auto",
marginRight: "auto",
maxWidth: 500,
paddingRight: 1,
paddingBottom: 1
};
const Contents = styled(Paper)(({ theme }) => ({
...theme.typography.h6,
padding: theme.spacing(1),
textAlign: "center"
}));
const tallGrid = {
height: '100%'
}
export default function GridExamples() {
return (
<Grid
container
spacing={1}
sx={{...gridStyles, ...tallGrid}}
>
<Grid item container alignItems={'center'} xs={6}>
<Contents sx={{flexGrow: 1}}>Item 1</Contents>
</Grid>
<Grid item container alignItems={'center'} xs={6}>
<Contents sx={{flexGrow: 1}}>Item 2</Contents>
</Grid>
<Grid item container alignItems={'center'} xs={6}>
<Contents sx={{flexGrow: 1}}>Item 3</Contents>
</Grid>
<Grid item container alignItems={'center'} xs={6}>
<Contents sx={{flexGrow: 1}}>Item 4</Contents>
</Grid>
</Grid>
);
}
Resources
Additional posts on the MUI Grid:
