title: Why do grid-items on the same row not align to the height of one of their siblings from the same row?
body: <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>.container {
      display:grid;
      grid-template-columns: 1fr 4fr 1fr;
      grid-template-rows: 50px 50px;
      grid-auto-flow: row;
   
      grid-gap: 2px 2px;
      height:100vh; 
  
      padding:2px;
  
  }
  
  
  .grid-box {
      background-color: skyblue;  
      padding: 10px 5px;
  }
  
  .three {
      height: 500px;
      
  }
  
  
  .one {
      grid-column:1/-1;
  }
  
  .two {
      grid-column: 1/-1;
  }
  
  .six {
      grid-column: 1/-1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;div class="container"&gt;
          &lt;div class="grid-box one"&gt;First&lt;/div&gt;
          &lt;div class="grid-box two"&gt;Second&lt;/div&gt;
          &lt;div class="grid-box three"&gt;Third&lt;/div&gt; 
          &lt;div class="grid-box four"&gt;Four&lt;/div&gt; 
          &lt;div class="grid-box five"&gt;Five&lt;/div&gt;   
          &lt;div class="grid-box six"&gt;Six&lt;/div&gt;      
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>The third grid-item has a height of 500px, but the track itself seems to be larger than 500px, and the
  other siblings keep expanding with the track, and so the 3 grid-items have different height. Even if you make the 3rd item height of 350px, or even 200px, its height does not align with the height of the siblings. Why? The inspector tool shows that the grid tracks are on the same height, but why is the 3rd item with different height? The height of the item is not the same as the track. I don't get it.</p>