title: MaterialUI: How to limit the height of a grid item to the height of other grid item at maximum?
body: <p>I'm trying to make a grid with 4 items. The fourth item is taller than the rest of the items, and is thus dictating the overall grid height. Is there a way to limit heigh of the fourth item (<code>h4</code>) to the height of the first item (<code>h1</code>) so that <code>h4 = Grid height = h1</code>?</p>
  <pre><code>&lt;Grid container xs={12} spacing={4}&gt;
      &lt;Grid xs={3}&gt;
          {*/ short item /*}
      &lt;/Grid&gt;
      &lt;Grid xs={3}&gt;
          {*/ short item /*}
      &lt;/Grid&gt;
      &lt;Grid xs={3}&gt;
          {*/ short item /*}
      &lt;/Grid&gt;
      &lt;Grid xs={3}&gt;
          {*/ long item /*}
      &lt;/Grid&gt;
  &lt;/Grid&gt;
  </code></pre>
  <p>Here's a <a href="https://codesandbox.io/s/mui-grid-limit-height-ve3hoz?file=/demo.tsx" rel="nofollow noreferrer">sandbox</a></p>
  <p><a href="https://i.stack.imgur.com/Vdfuf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Vdfuf.png" alt="picture" /></a></p>