title: CSS Grid why is the height different than expected
body: <p>Here's a CSS grid of an avatar on the left, the name and a description to the right.</p>
  <p><a href="https://jsfiddle.net/dwheaz43/" rel="nofollow noreferrer">https://jsfiddle.net/dwheaz43/</a></p>
  <p>Why is the height 104px instead of 100px for each wrapper? How do I get it to condense down to only the space needed to fit the text?</p>
  <pre><code>&lt;div class=&quot;wrapper&quot;&gt;&lt;picture class=&quot;avatar&quot;&gt;&lt;img src=&quot;https://placekitten.com/g/100/100&quot;&gt;&lt;/picture&gt;&lt;div class=&quot;name&quot;&gt;Nurlela Jicha&lt;/div&gt;&lt;span class=&quot;desc&quot;&gt;desc&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;wrapper&quot;&gt;&lt;picture class=&quot;avatar&quot;&gt;&lt;img src=&quot;https://placekitten.com/g/100/100&quot;&gt;&lt;/picture&gt;&lt;div class=&quot;name&quot;&gt;Bern Fetzer&lt;/div&gt;&lt;span class=&quot;desc&quot;&gt;desc&lt;/span&gt;&lt;/div&gt;
  
  .wrapper {
    display: grid;
    grid-template-columns: 100px 1fr;
  }
  .wrapper .avatar {
    grid-row: 1/3;
    grid-column: 1;
  }
  .wrapper .name {
    grid-row: 1;
    grid-column: 2;
  }
  .wrapper .desc {
    grid-row: 2;
    grid-column: 2;
  }
  </code></pre>