Source:  Twitter logo

I want to use same cards and make them center aligned, I searched and tried some solutions but all of them align only the component grid, and not the component content itself (I need them to be equally distant form the borders and from themselves).

I'm using this code (https://codesandbox.io/embed/32o8j4wy2q):

<Grid
      container
      spacing={0}
      direction="column"
      alignItems="center"
      justify="center"
      style={{ minHeight: '80vh' }}>
      <Grid container item xs={12} spacing={8}>
        <Grid item xs={6}>
          <Card />
        </Grid>
        <Grid item xs={6}>
          <Card />
        </Grid>
        <Grid item xs={6}>
          <Card />
        </Grid>
        <Grid item xs={6}>
          <Card />
        </Grid>
      </Grid>
    </Grid>

The card code is irrelevant but I just copied the material-ui's example one.

Also, how do I use flexboxes (or other tool) to auto align if I decide in the future to add or remove some cards?

I soved it by adding align="center" in the JSX code that means align-items: center in CSS as explained here.

The code was done like this:

  <Fragment>
    <Grid
      container
      spacing={24}
      justify="center"
      style={{ minHeight: '100vh', maxWidth: '100%' }}
      >
     <Grid item xs={3} align="center">
        <Card />
      </Grid>
      <Grid item xs={3} align="center">
        <Card />
      </Grid>
      <Grid item xs={3} align="center">
        <Card />
      </Grid>
      <Grid item xs={3} align="center">
        <Card />
      </Grid>
    </Grid>
  </Fragment>
35 users liked answer #0dislike answer #035
Pedro Vieira profile pic
Pedro Vieira

The accepted answer did not work for me, I got an error indicating that there was no overload for grid with an Align prop. I instead wrapped the component I wanted center aligned in a Grid container, with justify="center" and alignItems="center".

So in OPs example, it would look like:

<Fragment>
<Grid
  container
  spacing={24}
  justify="center"
  style={{ minHeight: '100vh', maxWidth: '100%' }}
  >
    <Grid item xs={3} align="center">
       <Grid container justify="center" alignItems="center">
          <Card />
       </Grid>
    </Grid>
</Grid>
4 users liked answer #1dislike answer #14
S Bradshaw profile pic
S Bradshaw

The align props does not exist anymore with grid. We can compose with Grid and Box

<Grid container>
  <Grid xs={8} item>
    <Box
      height="100%"
      display="flex"
      justifyContent="center"
      flexDirection="column"
    >
      Content with smaller height
    </Box>
  </Grid>
  <Grid xs={4} item>
    Content with bigger height
  </Grid>
</Grid>
3 users liked answer #2dislike answer #23
Morlo Mbakop profile pic
Morlo Mbakop

To align the Grid item content into it's centre

<Grid container>
  <Grid xs={8} item
      display="flex"
      justifyContent="center"
      flexDirection="column">
    <Box>
      Content with smaller height
    </Box>
  </Grid>
  <Grid xs={4} item>
    Content with bigger height
  </Grid>
</Grid>
0 users liked answer #3dislike answer #30
Rahul.S profile pic
Rahul.S

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).