title: how to make a grid item that uses remaining gridspace in reactjs material-ui?
body: <p>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</p>
  <p>Grid Item 1</p>
  <p>//remaining grid space</p>
  <p>Grid Item 2</p>
  <p>I have tried</p>
  <pre><code>&lt;Grid container direction=&quot;column&quot;&gt;
   &lt;Grid item xs={12}&gt;
    Grid Item 1
   &lt;/Grid&gt;
   &lt;Grid item xs={12} /&gt; // this makes a space but not the entire space
   &lt;Grid item xs={12}&gt;
    Grid Item 2
   &lt;/Grid&gt;
  </code></pre>
  <p>how can I achieve this?</p>