title: rows overlapping in CSS Grid Layout
body: <p>How can I prevent the footer row from overlapping the content row?</p>
  
  <p>This is what I'm getting:</p>
  
  <p><a href="https://i.stack.imgur.com/2LVr5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2LVr5.png" alt="enter image description here"></a></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>body {
   display: grid;
   grid-template-rows: 3.7rem auto auto;
   grid-template-columns: 3rem 3fr 2fr;
  }
  *[role="banner"] {
   grid-row: 1;
   grid-column: 2/4;
   
   background-color: green;
   height: 3rem;
  }
  *[role="main"] {
   grid-row: 2;
   grid-column: 2;
   background-color: yellow;
   height: 100px;
  }
  *[role="contentinfo"] {
   grid-row: 3;
   grid-column: 2/3;
   border-top: 1px solid black;
  }
  *[role="contentinfo"] img {
   height: 100px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div role="banner"&gt;&lt;/div&gt;
  &lt;article role="main"&gt;&lt;p&gt;Some Text.&lt;/p&gt;&lt;p&gt;Some more text&lt;/p&gt;&lt;p&gt;the last text&lt;/p&gt;&lt;/article&gt;
  &lt;footer role="contentinfo"&gt;&lt;img src="https://s14-eu5.ixquick.com/cgi-bin/serveimage?url=https%3A%2F%2Fdata.motor-talk.de%2Fdata%2Fgalleries%2F0%2F147%2F9424%2F43109894%2Fbild--7008737403287221413.jpg&amp;sp=6a4eaf3bd8ff58ca9d9bba2e3519888e"&gt;&lt;/footer&gt;</code></pre>
  </div>
  </div>
  </p>