CODEWITHSUNDEEP
cssreactjs
El Pandario
El Pandario

Reputation: 320

Display cards in a grid container with MUI

I want to display cards in a container spaced evenly but starting from the middle. Is there a way to do so with Material UI react? Right now I this:

Container maxWidth={false} disableGutters>
      <Box style={styles.background}>
      <Grid spacing={0} container>
        <Grid item sm='12' lg='4' xs='12' textAlign={'center'} justifyContent={'center'}>
          <HowToCard title="" 
          description='Entre le numéro de téléphone de la personne que tu aimes' />
        </Grid>
        <Grid textAlign={'center'} item sm='12' lg='4' xs='12'>
          <HowToCard title="" 
          description='La personne que tu aimes est inscrite sur le site'/>
        </Grid>
        <Grid textAlign={'center'} item sm='12' lg='4' xs='12'>
          <HowToCard title="" 
          description='Vous serez tous les deux prévenus si vous vous aimez mutuellement !'/>
        </Grid>
      </Grid>
      </Box>
    </Container>

But it makes my first card start at the edge on the left and then the second one is not centered and the third one is not as well. I would like the first card and the third card to be placed symmetrically compared to the middle one that would be in the center of the screen. Something like this: cards well spaced

Upvotes: 0

Views: 919

Answers (1)

Mahadev Mandal
Mahadev Mandal

Reputation: 154

Firstly set width of you <HowToCard> and then modify your code like this

<Container maxWidth={false} disableGutters>
   <Box style={styles.background}>
      <Grid sx={{flexGrow:1}} spacing={0} container justifyContent="space- 
       evenly">
        <Grid  item >
          <HowToCard title="" 
          description='Entre le numéro de téléphone de la personne que tu 
          aimes' />
        </Grid>
        <Grid  item >
          <HowToCard title="" 
          description='La personne que tu aimes est inscrite sur le site'/>
        </Grid>
        <Grid  item >
          <HowToCard title="" 
          description='Vous serez tous les deux prévenus si vous vous aimez 
          mutuellement !'/>
        </Grid>
      </Grid>
  </Box>
</Container>

Upvotes: 1

Related Questions