React - Material UI Items inside the grid refuse to center

Question

I want to center the cards inside the grid items, but it's not working. As I understood from the documentations (https://material-ui.com/components/grid/) I should use justifyContent="center" at the but that's not working, and in one of the answers on stack-overflow (How to center a component in Material-UI and make it responsive?) someone used justify="center" instead, so I tried that too but it didn't work.

<Grid container justifyContent="center">
  <Grid item xs={12} md={4} >
    <Card style={{maxWidth: 345}}>
      <CardActionArea>
        <CardMedia
          style={{height: 140}}
          image="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cHJvZHVjdHxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80"
          title="Contemplative Reptile"
          />
        <CardContent>
          <Typography variant="h5" component="h2">
            Lizard
          </Typography>
          <Typography gutterBottom variant="body2" color="textSecondary" component="p">
            Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging
            across all continents except Antarctica
          </Typography>
          <Typography gutterBottom varient="h5" color="Secondary">
            100
          </Typography>
        </CardContent>
      </CardActionArea>
    </Card>
  </Grid>
  <Grid item xs={12} md={4}>
    <Card style={{maxWidth: 345}}>
      <CardActionArea>
        <CardMedia
          style={{height: 140}}
          image="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cHJvZHVjdHxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80"
          title="Contemplative Reptile"
          />
        <CardContent>
          <Typography variant="h5" component="h2">
            Lizard
          </Typography>
          <Typography gutterBottom variant="body2" color="textSecondary" component="p">
            Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging
            across all continents except Antarctica
          </Typography>
          <Typography gutterBottom varient="h5" color="Secondary">
            100
          </Typography>
        </CardContent>
      </CardActionArea>
    </Card>
  </Grid>
  <Grid item xs={12} md={4}>
    <Card style={{maxWidth: 345}}>
      <CardActionArea>
        <CardMedia
          style={{height: 140}}
          image="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cHJvZHVjdHxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80"
          title="Contemplative Reptile"
          />
        <CardContent>
          <Typography variant="h5" component="h2">
            Lizard
          </Typography>
          <Typography gutterBottom variant="body2" color="textSecondary" component="p">
            Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging
            across all continents except Antarctica
          </Typography>
          <Typography gutterBottom varient="h5" color="Secondary">
            100
          </Typography>
        </CardContent>
      </CardActionArea>
    </Card>
  </Grid>
</Grid>

score 0 · Answer 1 · answered Aug 17 '21 at 04:37

0

You can remove xs and md and change justifyContent to space-around to give proper spacing between them. Have a look at the code sandbox. Here

answered Aug 17 '21 at 04:37

Aman Kumar

15
1
6

I see, but still that doesn't explain why 'justifyContent' did not work, do you know why? – S.M Aug 17 '21 at 08:47

React - Material UI Items inside the grid refuse to center

1 Answers1