rows overlapping in CSS Grid Layout

Question

How can I prevent the footer row from overlapping the content row?

This is what I'm getting:

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;
}

<div role="banner"></div>
<article role="main"><p>Some Text.</p><p>Some more text</p><p>the last text</p></article>
<footer role="contentinfo"><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&sp=6a4eaf3bd8ff58ca9d9bba2e3519888e"></footer>

Answer 1

The footer (row 3) is overlapping the article (row 2) because you have a fixed height on the article:

[role="main"] { height: 100px; }

The overrides the auto height you have specified on the grid container with:

grid-template-rows: 3.7rem auto auto

Once you remove the height rule, the overlap is gone.

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; <-------- REMOVE */
}
*[role="contentinfo"] {
	grid-row: 3;
	grid-column: 2/3;
	border-top: 1px solid black;
}
*[role="contentinfo"] img {
	height: 100px;
}

<div role="banner"></div>
<article role="main"><p>Some Text.</p><p>Some more text</p><p>the last text</p></article>
<footer role="contentinfo"><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&sp=6a4eaf3bd8ff58ca9d9bba2e3519888e"></footer>