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
andmd
breakpoints. However, since I changed the Grid container-levelcolumns
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
andmax-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 Griditem
div.
- Notice in the DOM screenshot above that the
- 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