CODEWITHSUNDEEP
javascriptcssreactjsmaterial-ui
Pedro Vieira
Pedro Vieira

Reputation: 2316

Center component inside the material-ui grid

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).

enter image description here enter image description here

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?

Upvotes: 21

Views: 41376

Answers (5)

Bilal Akbar
Bilal Akbar

Reputation: 138

You can try this:

<Fragment>
    <Grid container spacing={24} justify="center" style={{ minHeight: "100vh", maxWidth: "100%" }}>
        <Grid item xs={3} sx={{ textAlign: "center" }>
            <Card />
        </Grid>
        <Grid item xs={3} sx={{ textAlign: "center" }>
            <Card />
        </Grid>
        <Grid item xs={3} sx={{ textAlign: "center" }>
            <Card />
        </Grid>
        <Grid item xs={3} sx={{ textAlign: "center" }>
            <Card />
        </Grid>
    </Grid>
</Fragment>;

sx={{ textAlign: "center" }} is used to apply the center alignment styling to a specific JSX component or HTML element within a React application.

Upvotes: 1

Rahul.S
Rahul.S

Reputation: 413

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>

Upvotes: 0

Morlo Mbakop
Morlo Mbakop

Reputation: 3766

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>

Upvotes: 4

S Bradshaw
S Bradshaw

Reputation: 84

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>

Upvotes: 3

Pedro Vieira
Pedro Vieira

Reputation: 2316

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>

Upvotes: 39

Related Questions