How to add offset material-ui Grid

user_12657951 0
Viewed 14834

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!

grid-layout material-ui reactjs
5 Answers

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>
user_114711500
user_125486170

Just use a box with margin (mx) or padding px where x is horizontal. In my opinion this is better than introducing more css classes and properties that need maintenance.

  <Grid item xs={12}>
  <Box px={4}>
    <Button fullWidth className={classes.button} variant="contained">
      Continuar Comprando
    </Button>
    </Box>
  </Grid>

enter image description here

user_37171140

If you want to align a button to the right, all you have to do is set the container justifyContent to flex-end, like this:

<Grid container justifyContent="flex-end">
user_3870570

Material UI v5 now has an improved grid component called Grid2. Using Grid2, in order to get rid of the column before, you can use the xsOffset prop like so:

<Grid2 xs={10} xsOffset={1} justify='center' alignItems='center'>Content</Grid2>

Note that I didn't pass the item prop as Grid2 treats its grids as items by default unless you specify they should be treated as containers by passing the container prop.

user_94566880
Related