main.css

.header { 
    grid-area: header; 
    background-color: blue;
    display: flex;
    justify-content: center;
    font-size:  100px;
}
.footer { 
    grid-area: footer;
    background-color: cadetblue;
    display: flex;
    justify-content: center;
    font-size:  100px;
}
.main { 
    grid-area: main;
    background-color: beige;
    display: flex;
    justify-content: center;
    font-size:  100px; 
    align-items: center;
}
.left { 
    grid-area: navigation; 
    background-color: chartreuse;
    display: flex;
    justify-content: center;
    font-size:  50px;
}
.right { 
    grid-area: ads; 
    background-color: chartreuse;
    display: flex;
    justify-content: center;
    font-size:  50px;
}

.hg {
	display: grid;
	grid-template-areas: "header header header"
	                     "navigation main ads"
	                     "footer footer footer";
	grid-template-columns: 150px 1fr 150px;
	grid-template-rows: 100px 
						1fr
						100px;
	min-height: 100vh;
}

@media screen and (max-width: 600px) {
	.hg {
		grid-template-areas: "header"
		                     "navigation"
		                     "main"
		                     "ads"
		                     "footer";
		grid-template-columns: 100%;
		grid-template-rows: 100px 
							50px 
							1fr
							50px 
							100px;
	}
}