title: How css grid computes row auto height?
body: <p>In the below snippet, I can not understand how <code>.cell1</code>(orange) height has been computed. Why it is so high? Why it is higher than right column content? How left cells height depends on right column and it's contains height? </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>header {
    display: grid;
    grid-template-columns: 70% 30%;
    grid-template-rows: 62px auto;
    background: beige;
  }
  
  .cell1 {
    grid-column: 1/2;
    grid-row: 1/2;
    background: salmon; 
  }
  
  .cell2 {
    grid-column: 1/2;
    grid-row: 2/3;
    background: MediumSpringGreen; 
  }
  
  .cell3 {
    grid-row: 1/3;
    grid-column: 2/3;
    background: PeachPuff; 
  }
  
  .cell3-1 {
    background: MediumPurple;
    height: 5px;
  }
  
  .cell3-2 {
    background: LightSkyBlue;
    height: 10px;
  }
  
  .cell3-3 {
    background: Navy;
    height: 30px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header&gt;
    &lt;div class="cell1"&gt;1&lt;/div&gt;
    &lt;div class="cell2"&gt;2&lt;/div&gt;
    &lt;div class="cell3"&gt;
      &lt;div class="cell3-1"&gt;&lt;/div&gt;
      &lt;div class="cell3-2"&gt;&lt;/div&gt;
      &lt;div class="cell3-3"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/header&gt;</code></pre>
  </div>
  </div>
  </p>