The Complete Guide to MUI Grid Item Alignment (v4 and v5)

This guide focuses on aligning items in every conceivable way in Material-UI Grid: aligning right, left, and horizontally centered; aligning top, bottom, and vertically centered. In this example I will use the Material-UI Grid, but the alignment principles apply for aligning all MUI components.

You will learn how to align items in any vertical or horizontal direction using inline styling (display: flex, justify-content, and align-items).

You will also learn how using the built-in Material-UI Grid API (container/direction/justify/alignItems). This uses Material-UI’s built-in flexbox system.

First you will need to know how Grid containers and items work, and how breakpoints calculate item width.

***UPDATE: I have updated this article with a section on what’s new in MUI v5. All of the code calls out both the v4 and v5 syntax. The v5 styling syntax is mostly the same except for two things:

1. MUI now uses a styling prop called sx instead of makeStyles
2. The justify prop became justifyContent to better match the CSS property.

The Resources section contains two Code Sandbox links, one for a v4 version and one for a v5 version.

Here is the simple grid you will build. With the combination of vertical and horizontal alignment that you will learn, you will be able to align items in any way you desire.

Want an example that doesn’t use the Grid? Here’s an example that aligns Buttons using the Box component.

Here’s a YouTube version of this post, or watch it below:

My MUI course on Udemy is now available!!! Build a full MUI app from beginning to end, learn every aspect of the sx prop, styled API, and the theme, and tackle the most challenging components! Do you want an active Q&A with me?!? Check here for coupons for my MUI course on Udemy.

Here’s more information on the Material-UI Grid API and how it compares to CSS Grid and Bootstrap.

Material-UI Grid Align Left

Let’s start by left aligning the first column with inline styling. The Grid Item in the top row will be vertically aligned top, the center row will be vertically aligned center, and the bottom row will be vertically aligned bottom. Ignore the className, it simply styles the borders on each item.

Take a look at the Grid image in the intro for a mental picture. In each section I’ll show the code and then explain it below:

<Grid container direction="column" item xs={4}>
  <Grid
    item
    xs
    className={classes.outerColumn}
    style={{ display: "flex", justifyContent: "flex-start" }}
  >
    <Typography>Top L.</Typography>
  </Grid>
  <Grid
    item
    xs
    className={classes.outerColumn}
    style={{ display: "flex", alignItems: "center" }}
  >
    <Typography>Center L.</Typography>
  </Grid>
  <Grid
    item
    xs
    className={classes.outerColumn}
    direction="column"
    align="left"
    style={{ display: "flex", justifyContent: "flex-end" }}
  >
    <Typography>Bottom L.</Typography>
  </Grid>
</Grid>

//v5 method: instead of style and class, use the sx prop:
<Grid
  item
  xs
  sx={{
    borderRight: "1px solid grey",
    borderBottom: "1px solid grey",
    borderLeft: "1px solid grey",
    height: 100,
    display: "flex",
    justifyContent: "flex-start"
    }}
  >

The “Top L.” item is simply aligned top and left by default. However, adding the justifyContent: “flex-start” ensures no surprises. justifyContent handles the horizontal centering of any child components. Make sure to also set display: flex. Both of these stylings should be set on the parent container that items are aligned relative to.

As info, grids that use the Material-UI Grid API might be referred to as flex grids. The flex prop is making use of the flexbox system built into Material-UI.

The “Center L.” item uses the alignItems: “center” style to control the vertical alignment of the Grid contents. The contents are left aligned by default but you could have chosen to include justifyContent: “flex-start”.

The “Bottom L” item I use a mix of inline style and MUI Grid API just to show it is possible. With direction=“column” included on the Grid item, then the justifyContent: “flex-end” actually applies to the vertical alignment instead of the horizontal alignment. If the direction property was removed, the Typography text would actually appear in the top right of the item.

The outerColumn class simply sets height and border styling. I used the makeStyles hook to create all my classes in the MUI v4 example.

Material-UI Grid Center Align and Vertical Align

<Grid container direction="column" item xs={4} align="center">
  <Grid
    item
    container
    className={classes.centerColumn}
    display="flex"
    justify="center" //in MUI v5 this prop is renamed justifyContent
  >
    <Typography>Center Top</Typography>
  </Grid>
  <Grid
    item
    container
    className={classes.centerColumn}
    direction="column"
    display="flex"
    justify="center"
  >
    <Typography>Center Center</Typography>
  </Grid>
  <Grid
    item
    className={classes.centerColumn}
    container
    direction="row"
    alignItems="flex-end"
    justify="center"
  >
    <Typography>Center Bottom</Typography>
  </Grid>
</Grid>

//MUI v5 example:
<Grid
  item
  container
  sx={{ borderBottom: "1px solid grey", height: 100 }}
    direction="column"
    justifyContent="center"
  >

The center column in my example uses only MUI Grid API and no inline styling. However, if you wanted to achieve vertical alignment using CSS, you would want to use align items with one of the following values:

• flex-start: vertically aligns top
• center: vertically aligns center
• flex-end: vertically aligns bottom

When using MUI Grid API, it is important to notice that when direction=“column”, alignItems affects horizontal alignment and justifyContent affects vertical alignment. When direction=“row” (the default), the opposite is true.

Also notice that each of the inner Grid components has both a “container” prop and an “item” prop. The container prop is required in order for the direction, display, justify, and alignItems props to take effect.

The “Top Center” implicitly has direction=“row” because that is the default value. Therefore, justify=“center” does the trick of the horizontal alignment.

The “Center Center” item I gave a direction of “column” to show the difference. Without the justify=“center”, it would not be centered vertically. The direction=“column” actually adds horizontal centering implicitly.

Another way to accomplish MUI Grid centering is with the following code:

<Grid
  item
  container
  direction="row"
  alignItems="center"
  justifyContent="center"
>
  <Typography>Center Center</Typography>
</Grid>

Since direction=”row”, we have to manually set the center alignment both vertically and horizontally.

On the “Bottom Center” item, alignItems=“flex-end” adds the vertical bottom alignment and justify=“center” adds the horizontal centering. This Grid had a direction of “row” which meant the default alignment was top and left.

Material-UI Grid Align Right

If you need to horizontally align using only CSS, remember that justify-content horizontally aligns using the following values:

• flex-start: horizontally aligns left
• center: horizontally aligns center
• flex-end: horizontally aligns right

Since I have examples of the CSS-only approach in the section on left alignment, in this section I align items in the Grid using Material-UI’s Grid API. It looks very similar to the CSS-only approach, but it uses props with values similar to the familiar CSS values.

Take a look at the following code to see what I mean:

<Grid container direction="column" item xs={4}>
  <Grid
    item
    className={classes.outerColumn}
    container
    direction="column"
    alignItems="flex-end"
    justify="flex-start" //in MUI v5 this prop is renamed justifyContent
  >
    <Typography>Top R.</Typography>
  </Grid>
  <Grid
    item
    className={classes.outerColumn}
    container
    direction="row"
    alignItems="center"
    justify="flex-end"
  >
    <Typography>Center R.</Typography>
  </Grid>
  <Grid
    item
    className={classes.outerColumn}
    container
    direction="column"
    alignItems="flex-end"
    justify="flex-end"
  >
    <Typography>Bottom R.</Typography>
  </Grid>
</Grid>

//MUI v5 example:
<Grid
  item
  sx={{
    borderRight: "1px solid grey",
    borderBottom: "1px solid grey",
    borderLeft: "1px solid grey",
    height: 100
    }}
  container
  direction="row"
  alignItems="center"
  justifyContent="flex-end"
>

Once again, we see the direction prop confirms or reverses the normal orientation of justify and alignItems.

The “Top R.” item has a direction of “column”. Therefore, the defaults are reversed. Instead, alignItems will control horizontal alignment while justify will control vertical alignment.

The “Center R.” has a direction of “row”. This is the default and similar to how the related CSS attributes behave: alignItems will control vertical alignment and justify will control horizontal alignment.

The “Bottom R.” is back to direction=“column”. Therefore, alignItems will control horizontal alignment while justify will control vertical alignment.

Resources:

Setting item height in the MUI Grid can also be tricky. Here’s exactly how to set item height and here’s how to set Grid container height and width.

Expand your JavaScript knowledge with these 50 difficult questions!

Material-UI v4 Code Sandbox Link.

MUI v5 Code Sandbox Link.

Here’s how to build the same grid and align buttons in Bootstrap.