How to add offset material-ui Grid

Question

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!

Answer 1

the best way I found this solution is as follows.

<Grid container>
    {/* offset grid with column you want to offset */}
    <Grid item lg={6} md={6} sm={6}/>
    {/* main grid column! */}
    <Grid item lg={6} md={6} sm={6}>
        I am offset column!.🔥
    </Grid>
</Grid>