Search code examples
reactjsmaterial-uigrid-layout

How to add offset material-ui Grid

I'm trying to make a small 'Item added' popup dialog on material-ui using it's Grid system. But i can't figure out how to add offset to the Grid. I'm trying to achieve something similar to Bootstrap's col-sm-10 offset-1 using

<Grid container justify='center' alignItems='center' item xs={10}>

But it doesn't work. My solution was to add an empty column before and after my content, like:

<Grid item xs={1}></Grid>
<Grid item xs={10} justify='center' alignItems='center'>Content</Grid>
<Grid item xs={1}></Grid>

Do I have to do it like this? I can't figure out why justify and alignItems are not working. Here is the code on codesandbox: https://codesandbox.io/s/item-added-jx9ri

Thanks for the help!

Solution

  • I forked the sandbox, you needed to add some properties to your container as opposed to using ghost grid items.

    please see here https://codesandbox.io/s/item-added-forked-kv9qw?file=/src/App.js