how to make a grid item that uses remaining gridspace in reactjs material-ui?

Admin 1
Viewed 1775

I am using material-ui grid in reactjs. In a column grid container, I want to use a grid item and I want to show another grid item. I want third item to use up the remaining grid space between the other 2 grid items. (i.e.) I want to show like

Grid Item 1

//remaining grid space

Grid Item 2

I have tried

<Grid container direction="column">
 <Grid item xs={12}>
  Grid Item 1
 </Grid>
 <Grid item xs={12} /> // this makes a space but not the entire space
 <Grid item xs={12}>
  Grid Item 2
 </Grid>

how can I achieve this?

material-ui reactjs javascript
2 Answers

I am not getting why you are using xs={12} in all items ...
if you want the item will occupy remaining space.. it may solve your problem 

<Grid container direction="row">
      <Grid item xs={3}>
        Grid Item 1
      </Grid>
      <Grid item xs>
        Grid Item 2
      </Grid>
      <Grid item xs={3}>
        Grid Item 3
      </Grid>
    </Grid>
user_129726930

You're talking about the column grid in question but in code snippet, row is used. So I'm assuming a column grid.
Also Naima is making a valid point about giving xs={12]}. If you provide 12, then it'll take the entire rows/space.

<Grid container direction="column">
  <Grid item xs={3}>
    Grid Item 1
  </Grid>
  <Grid item xs={true}>
    // this makes a space but not the entire space
  </Grid>
  <Grid item xs={3}>
    Grid Item 2
  </Grid>
</Grid>

Setting xs={true}, will take the available space

user_112222820
Related