CSS Grid - Auto height rows, sizing to content : <p>I have two grids nested within a grid. Unfortunately the right nested grid <code>.grid-3</code> sets the height of the rows so that both the left and right grid are the same height, the extra space is shared among the divs with the class <code>.right</code>. How can I set the rows of the right nested grid to adjust to the size of the content, so they are the same height as the left nested rows? </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>div {
  border: 1px dotted black;
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows auto;
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows auto;
}

.left {
  background-color: red;
}
 
.right {
  background-color: green;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="grid-2"&gt;
      &lt;div class="grid-2"&gt;
        &lt;div class="left"&gt;L&lt;/div&gt;
        &lt;div class="left"&gt;L&lt;/div&gt;
        &lt;div class="left"&gt;L&lt;/div&gt;
        &lt;div class="left"&gt;L&lt;/div&gt;
        &lt;div class="left"&gt;L&lt;/div&gt;
        &lt;div class="left"&gt;L&lt;/div&gt;
        &lt;div class="left"&gt;L&lt;/div&gt;
        &lt;div class="left"&gt;L&lt;/div&gt;
        &lt;div class="left"&gt;L&lt;/div&gt;
        &lt;div class="left"&gt;L&lt;/div&gt;
        &lt;div class="left"&gt;L&lt;/div&gt;
        &lt;div class="left"&gt;L&lt;/div&gt;
        &lt;div class="left"&gt;L&lt;/div&gt;
        &lt;div class="left"&gt;L&lt;/div&gt;
        &lt;div class="left"&gt;L&lt;/div&gt;
        &lt;div class="left"&gt;L&lt;/div&gt;
        &lt;div class="left"&gt;L&lt;/div&gt;
        &lt;div class="left"&gt;L&lt;/div&gt;
     &lt;/div&gt;
     &lt;div class="grid-3"&gt;
         &lt;div class="right"&gt;R&lt;/div&gt;
        &lt;div class="right"&gt;R&lt;/div&gt;
        &lt;div class="right"&gt;R&lt;/div&gt;
        &lt;div class="right"&gt;R&lt;/div&gt;
        &lt;div class="right"&gt;R&lt;/div&gt;
        &lt;div class="right"&gt;R&lt;/div&gt;
        &lt;div class="right"&gt;R&lt;/div&gt;
        &lt;div class="right"&gt;R&lt;/div&gt;
        &lt;div class="right"&gt;R&lt;/div&gt;
        &lt;div class="right"&gt;R&lt;/div&gt;
        &lt;div class="right"&gt;R&lt;/div&gt;
        &lt;div class="right"&gt;R&lt;/div&gt;
        &lt;div class="right"&gt;R&lt;/div&gt;
     &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>
