filas superpuestas en el diseño de cuadrícula CSS

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>