Grid elements are not centered

Hello, my grid elements aren't centered, why is that so?

 return (
    <Container
      sx={{mt: 2, mb: 2}}>
      <Grid
        justifyContent="center"
        alignItems="center"
        container
        spacing={2}
        columns={{xs: 1, sm: 1.5, md: 3, lg: 5.5, xl: 6.5}}
        sx={{width: 1}}>
        <Grid item xs={1} md={1.5} align="center">
          <InfoBox title="Block Count" value="1231212"/>
        </Grid>
        <Grid item xs={1} md={1.5} lg={2} align="center">
          <InfoBox title="Header Count" value="123231121"/>
        </Grid>
        <Grid item xs={1} align="center">
          <InfoBox title="Peers" value="123"/>
        </Grid>
        <Grid item xs={1} md={2} align="center">
          <InfoBox title="DAA Score" value="1237867112"/>
        </Grid>
      </Grid>
    </Container>
  );

 return (
    <Container
      sx={{mt: 2, mb: 2}}>
      <Grid
        justifyContent="center"
        alignItems="center"
        container
        spacing={2}
        columns={{xs: 1, sm: 1.5, md: 3, lg: 5.5, xl: 6.5}}
        sx={{width: 1}}>
        <Grid item xs={1} md={1.5} align="center">
          <InfoBox title="Block Count" value="1231212"/>
        </Grid>
        <Grid item xs={1} md={1.5} lg={2} align="center">
          <InfoBox title="Header Count" value="123231121"/>
        </Grid>
        <Grid item xs={1} align="center">
          <InfoBox title="Peers" value="123"/>
        </Grid>
        <Grid item xs={1} md={2} align="center">
          <InfoBox title="DAA Score" value="1237867112"/>
        </Grid>
      </Grid>
    </Container>
  );

InfoBox:

return (
    <Box
      sx={{
        'display': 'flex',
        'backgroundColor': 'background.paper',
        'boxShadow': 3,
        'overflow': 'hidden',
        'height': 120,
        'borderRadius': 1.5,
        '&:hover': {
          backgroundColor: 'background.paper',
          opacity: [0.9, 0.87, 0.86],
        },
      }}
    >
      <Typography align="left" variant="h5"
        sx={{
          marginLeft: 2, marginTop: 1, marginRight: 1.3,
          flexGrow: 1,
          fontSize: 27, fontWeight: 700, fontColor: 'white'}}>
        {props.title}
      </Typography>
      <Typography align="right" variant="h3" color='#007aff'
        sx={{
          marginTop: 1, marginRight: 1.3,
          flexGrow: 1,
          fontWeight: 600, fontSize: 33}}>
        {props.value}
      </Typography>
    </Box>
  );

return (
    <Box
      sx={{
        'display': 'flex',
        'backgroundColor': 'background.paper',
        'boxShadow': 3,
        'overflow': 'hidden',
        'height': 120,
        'borderRadius': 1.5,
        '&:hover': {
          backgroundColor: 'background.paper',
          opacity: [0.9, 0.87, 0.86],
        },
      }}
    >
      <Typography align="left" variant="h5"
        sx={{
          marginLeft: 2, marginTop: 1, marginRight: 1.3,
          flexGrow: 1,
          fontSize: 27, fontWeight: 700, fontColor: 'white'}}>
        {props.title}
      </Typography>
      <Typography align="right" variant="h3" color='#007aff'
        sx={{
          marginTop: 1, marginRight: 1.3,
          flexGrow: 1,
          fontWeight: 600, fontSize: 33}}>
        {props.value}
      </Typography>
    </Box>
  );

Thanks for the help.

0 Replies

No replies yetBe the first to reply to this messageJoin