Need help with MaterialUI's Grid component

Here's the code

<Grid
      container
      direction="column"
      justifyContent="flex-start"
      alignItems="stretch"
      gap={3}
    >
      <Grid container spacing={3} columns={3}>
        <Grid item xs>
          <StatsCard num="2" title="days since last incident" />
        </Grid>
        <Grid item xs>
          <StatsCard num="10" title="pending cases" />
        </Grid>
        <Grid item xs>
          <StatsCard num="5" title="approved cases" />
        </Grid>
      </Grid>
      <Grid container spacing={3} columns={3}>
        <Grid item xs={2}>
          <StatsCard num="2" title="days since last incident" />
        </Grid>
        <Grid item xs>
          <KPISection num="10" title="Incidents FY2022" />
        </Grid>
      </Grid>
</Grid>

<Grid
      container
      direction="column"
      justifyContent="flex-start"
      alignItems="stretch"
      gap={3}
    >
      <Grid container spacing={3} columns={3}>
        <Grid item xs>
          <StatsCard num="2" title="days since last incident" />
        </Grid>
        <Grid item xs>
          <StatsCard num="10" title="pending cases" />
        </Grid>
        <Grid item xs>
          <StatsCard num="5" title="approved cases" />
        </Grid>
      </Grid>
      <Grid container spacing={3} columns={3}>
        <Grid item xs={2}>
          <StatsCard num="2" title="days since last incident" />
        </Grid>
        <Grid item xs>
          <KPISection num="10" title="Incidents FY2022" />
        </Grid>
      </Grid>
</Grid>

You see, the second row's first cell is short compares to its sibling which is the Incident cell. How do I stretch the height of the cell so it matches the height of the Incident cell?

1 Reply

Chris Bolson•2y ago

I have no idea about MaterialUI but, based on what you have shown maybe you need to add alignItems="stretch" to the 2nd row grid container

Gaming

Programming

Need help with MaterialUI's Grid component