title: Set row height to fit content height in CSS Grid
body: <p>I have a grid with two columns and two rows. I have to place two grid items in one column (on the right) and one item on the left. Then I want first element from the right column to have maximum height equal to its content height. How can I accomplish this?</p>
  
  <p>The problem that I'm facing right now is that these two items on the right, have 50% height and I can't find a way to to set first one to minimum possible height, and the other one to the rest of height (auto).</p>
  
  <p>Just to clarify - <strong>height of each items is not fixed</strong>. Below you can see how it look right now.</p>
  
  <p>One more thing, <strong>I can't change order of HTML DIV elements</strong> due to responsive web design.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.grid{
    display: grid;
    grid-template-columns: auto 300px;
    grid-column-gap: 20px;
    grid-template-areas: "main_content top" "main_content bottom";
  }
  
  .left{
    grid-area: main_content;
  }
  
  .top_right{
    grid-area: top;
    background: #ffa4a4;
  }
  
  .bottom_right{
    grid-area: bottom;
    background: #c7ffae;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="grid"&gt;
    &lt;div class="top_right"&gt;I'm top right&lt;/div&gt;
    &lt;div class="left"&gt;Long left content... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras semper, eros ut cursus semper, dolor felis gravida ligula, et venenatis neque felis quis justo. Duis aliquet ex vitae tincidunt sodales. Fusce neque metus, pharetra eu molestie sed, tincidunt ac eros. Ut vehicula maximus sodales. Curabitur vehicula sollicitudin erat et rutrum. Aliquam id fermentum erat. Nulla pulvinar vel tortor in imperdiet. Nulla sit amet condimentum eros. Vestibulum tempor et massa eu sagittis. Integer eget nisi sagittis, placerat nibh sed, varius mi. Donec vel lorem at dolor euismod porttitor. Curabitur tincidunt magna facilisis, dapibus odio vitae, pretium orci. Aliquam lacus velit, rhoncus non porta vitae, pellentesque at libero. &lt;/div&gt;
    &lt;div class="bottom_right"&gt;I'm bottom right&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>