CODEWITHSUNDEEP
reactjsmaterial-ui
Areeba Akhtar
Areeba Akhtar

Reputation: 137

Paper component not stretching in Material-UI

The items in the grid are being stretched but the paper component inside is not stretching

<Grid
      container
      justifyContent="center"
      direction="row"
      spacing={2}
      alignItems="stretch">
      <Grid item lg={3} md={3}>
        <Paper className={classes.paperClass} elevation={3}>
          <Typography variant="h5">Lorem ipsum dolor</Typography>
          <Typography>
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic
            obcaecati fugiat, cu
          </Typography>
        </Paper>
      </Grid>
      <Grid item lg={3} md={3}>
        <Paper className={classes.paperClass} elevation={3}>
          <Typography variant="h5">Lorem ipsum dolor</Typography>
          <Typography>
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic
            obcaecati fugiat, cu
          </Typography>
        </Paper>
      </Grid>
      <Grid item lg={3} md={3}>
        <Paper className={classes.paperClass} elevation={3}>
          <Typography variant="h5">Lorem ipsum dolor</Typography>
          <Typography>
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic
            obcaecati fugiat, cur sit, amet consectetur adipisicing elit. Hic
            obcaecati fugiat, cu
          </Typography>
        </Paper>
      </Grid>
    </Grid>

I want each paper in grid item to have equal height but the stretch property is not working

Upvotes: 2

Views: 846

Answers (1)

NearHuscarl
NearHuscarl

Reputation: 81270

From the docs:

The grid creates visual consistency between layouts while allowing flexibility across a wide variety of designs. Material Design's responsive UI is based on a 12-column grid layout.

The grid layout is divided into 12 columns. If you want it to stretch 100%, set the grid item prop xs to 12 to make it span across all columns:

<Grid item xs={12}>

Live Demo

Codesandbox Demo

Upvotes: 1

Related Questions