How to Create a MUI Grid Container with Full Width and Height

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.

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.

MUI Grid Container Full Width
MUI Grid Container Full 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.

MUI Grid Container Full Height
MUI Grid Container Full Height

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:

MUI Grid docs

Share this post:

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.