title: CSS Grid, grid item "height: 100%" not working in Chrome
body: <p>This is my first post here... so hopefully I get all of the necessary info in this question.</p>
  
  <p>I've been working all day on trying to get the correct grid functionality on some cards I'm creating (see links to screenshots below). After working a while, I was able to get my desired results in Firefox, but when I test in Chrome... It's not anywhere close to the same as Firefox.</p>
  
  <p>Firefox Results</p>
  
  <p><img src="https://i.stack.imgur.com/lmtBd.jpg" alt="Firefox Results"></p>
  
  <p>Chrome Results</p>
  
  <p><img src="https://i.stack.imgur.com/oWxpP.png" alt="Chrome Results"></p>
  
  <p>It seems when I comment out "height: 100%;" on the image the functionality is <em>better</em> in Chrome, but still not what I'm wanting.</p>
  
  <p>Chrome with "height: 100%;" removed:</p>
  
  <p><img src="https://i.stack.imgur.com/ShPLL.jpg" alt="Chrome with &quot;height: 100%;&quot; removed"></p>
  
  <p>Here's my markup:</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>.projects {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(35rem, 1fr));
    grid-gap: 7rem;
    &amp;__item {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(2, 1fr);
    }
    &amp;__img {
      width: 100%;
      height: 100%;
      grid-column: 1 / -1;
      grid-row: 1 / 2;
      display: block;
      object-position: center;
      object-fit: cover;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section class="projects"&gt;
    &lt;div class="projects__item projects__item--1"&gt;
      &lt;img src="img/projects-1.png" class="projects__img"&gt;
      &lt;div class="projects__content"&gt;
        &lt;h3 class="projects__heading--3 heading-3"&gt;Project Title&lt;/h3&gt;
        &lt;p class="projects__text"&gt;
          Insert Text
        &lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Can anyone see where I've gone wrong? </p>