MUI Grid Spacing, Padding, and Margin: A Styling Guide

The Material-UI Grid is composed of individual children Grids with either a container or item layout prop enabled. The container and item props affect when and how spacing, padding, and margin can be used.

We will explore how spacing renders in the DOM. For example, spacing={3} only adds padding-top and padding-left. This is by design.

We’ll also see how to style the Grid with margin and padding. For example, margin styling on Grids with item prop affects the column count and should be avoided. Padding can be used to make a symmetric grid with padding-right and padding-bottom.

The Grid has lots of style considerations. Here are additional useful resources:

• The Complete Guide to MUI Grid Item Alignment
• The Ultimate Guide to Setting Material UI Grid Item Height
• Material-UI’s Grid Component vs Flexbox, Bootstrap, and CSS Grid
• How to Create a MUI Grid Container with Full Width and Height
• Customizing the MUI Container: Padding, Margin, Styling

I have a Code Sandbox link with a live demo and full React code in the Resources section.

Here’s a YouTube version of this post, or you can view it below:

MUI Grid Container Spacing

I forked the simple multi-breakpoint Grid example from the docs and set every documented prop on the wrapping container Grid. The off-centered padding is no mistake: this is how the Grid is designed.

I added background color to show the padding and margin of the interior item Grids. Notice how only the top and left have padding. We will explore why this happens, and I will fix this by styling the container Grid using the sx prop.

Here’s the code for the simple Grid above:

<Grid
  container
  //spacing={2}
  rowSpacing={2}
  columnSpacing={2}
  columns={16}
  sx={gridStyles}
>
  <Grid item xs={6} md={10}>
    <Contents>xs=6 md=10</Contents>
  </Grid>
  <Grid item xs={10} md={6}>
    <Contents>xs=10 md=6</Contents>
  </Grid>
  <Grid item xs={10} md={6}>
    <Contents>xs=10 md=6</Contents>
  </Grid>
  <Grid item xs={6} md={10}>
    <Contents>xs=6 md=10</Contents>
  </Grid>
</Grid>

The rowSpacing and columnSpacing props combine to have the same effect as the spacing prop. According to the docs, they are similar to row-gap and column-gap in CSS Grid.

The wrapping Grid has container prop and the interior Grids have item prop. The Item component nested at the deepest levels is simply a Paper with some custom styling.

First, let’s examine the DOM effects of the props applied to the container Grid:

The first interesting thing I see is that there is a MuiGrid-container class applied but it is not directly affecting the DOM. The second interesting thing I noticed after playing with the spacing (or columnSpacing) is that the width adjusts by 100% + px when spacing is added.

Going through the props one-by-one, here are the effects I see:

• spacing – this adds padding-top and padding-left equally to each child Grid inside the container. It’s interesting that it doesn’t add padding-right or padding-bottom. If you want to have your grid look symmetrical in a larger UI context, you need to manually adding padding-right and padding-bottom at the containing Grid level.
  

• rowSpacing – this adds padding-top to the Grid items
• columnSpacing – this adds padding-left to the Grid items
• columns – this changes the total column count from the default of 12. In my Grid example, I have a count of 16. Make sure that your child items add up to the column value for each breakpoint (i.e. in my example two children in one row need their xs values to total 16)

As a reminder, the Grid with container prop enabled should not be confused with the Container component. The Container component is used for horizontal layout (although the new MUI v5 Stack component is even better for horizontal layout!), while the Grid is used for two-dimensional layouts (in other words, layouts with both vertical and horizontal aspects).

MUI Grid Container Padding and Margin

Let’s fix the strange padding on our Grid and make it look like something respectable:

To create this even styling, I passed the following style object to the Grid container sx prop:

const gridStyles = {
  backgroundColor: "blue",
  paddingBottom: 2,
  paddingRight: 2,
  marginTop: 2,
  marginLeft: "auto",
  marginRight: "auto",
  maxWidth: 500
};

• Background color – this adds background color to the Grid container that ‘shows through’ the padding on the container and the padding on the item level Grids.
• padding – The padding right and padding bottom are drawing on the MUI system values, not px values. In reality this is applying a value of 16px to both.
• margin – The Grid margin is external to the blue background. I am using it to horizontally center the Grid and space it away from the top of the viewport.

It is important to remember the following about MUI Grid padding:

• The spacing prop applies padding at the item level
• To make the Grid symmetrical, it’s easiest to apply padding at the container level
  • it could be applied at the item level but would require more code

MUI Grid Spacing Not Working

If Grid spacing is not working, consider the following that my DOM research showed:

• The spacing prop must be applied on Grids with nested child Grid items (and it only affects the child elements)
• The spacing prop on a parent overrides padding applied with sx on a child
• Margin on child Grid items can negatively impact the visual outcome of spacing

How Material-UI Grid Items Affect Spacing

Material-UI Grids with the item prop enabled are deeply tied to the Grid container they are nested in. If you skipped the Grid container section, I recommend you take a look at the DOM screenshot I got of Grid item padding being manipulated by rowSpacing and columnSpacing props at the container level. I will refer to it below to explain the effects of props at the Grid item level.

A Grid with the item and a Grid with the container prop actually are quite similar. Both have similar style properties applied by the .MuiGrid-root class. The main purpose of the .MuiGrid-item class is to facilitate nested selecting and applying of styling such as the padding-left applied by the columnSpacing prop.

An additional job of the grid item prop is to facilitate styling of the grid contents, especially breakpoints, text spacing and wrapping, and width.

I enabled all documented props applicable to the Grid item level and these were the effects:

• xs and md multi-breakpoints – just like the MUI docs example I forked from, I left xs and md breakpoints. However, since I changed the Grid container-level columns prop to 16, my xs and md breakpoints needed to sum to 16 for each row.
  • Notice in the DOM screenshot above that the flex-basis and max-width are 37.5%. This is how the sx breakpoint is working: it is allocating 6/16 columns, or 6/16 % of the available width, to the highlighted Grid item div.
• zeroMinWidth and wrap – these can be used together to create desired behavior for text that is larger than the Grid item. A common example is using ellipsis when text is too long.
• sx – this is one of two new MUI v5 styling APIs. You can add any CSS styling via the sx prop, plus any MUI system values (i.e. bgcolor: 'background.paper'). Important: do not try to add margin to the Grid at the item level. It will affect the column calculations and cause unintended layout behavior.

MUI Grid Remove Padding

Here are two steps to completely remove padding from the MUI Grid:

• Completely remove the spacing prop (or set spacing={0})
• Make sure no padding is applied in the sx prop or classes

The first step should be enough, but if you still have padding then confirm the second step is complete.

You should have a grid like the below after completing these steps:

Styling the Material-UI Grid with makeStyles Migrated to MUI v5

The code for styling the root of the Grid is almost identical between makeStyles and the sx prop. Simply put, the makeStyles hook is more verbose code to accomplish the same effect. I strongly recommend using the sx prop or the styles() API for new development.

The primary change for makeStyles from MUI v4 to v5 is the import. Now we use import { makeStyles } from "@mui/styles";.

//MUI v5 makeStyles hook

import { makeStyles } from "@mui/styles";

const useStyles = makeStyles({
  root: {
    backgroundColor: "blue",
    paddingBottom: 16,
    paddingRight: 16,
    marginTop: 16,
    marginLeft: "auto",
    marginRight: "auto",
    maxWidth: 500
  }
});

export default function FullWidthGrid() {
  const classes = useStyles();
  return (
    <>
      <Grid
        container
        className={classes.root}
    //Additional JSX
      </Grid>
  );
}

Resources

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.

I created and packaged a new component for external spacing: MUI Spacer

Code Sandbox link

MUI Grid Docs

MUI Grid API