style.css

body {
	margin: 0;
	height: 100vh;
    display: grid;
    grid-template-areas:
			'header'
			'menu'
			'main'
			'ad'
			'footer';
	grid-template-columns: 1fr;
	grid-template-rows: repeat(5, 1fr);
	text-align: center;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
		Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

header {
	background: lightblue;
	grid-area: header;
}

#menu {
	background-color: lightcoral;
	grid-area: menu;
}

main {
	background-color: lightyellow;
	grid-area: main;
}

aside {
	background-color: lavender;
	grid-area: ad;
}

footer {
	background-color: lightsalmon;
	grid-area: footer;
}
@media (min-width: 768px) {
	body {
        display: grid;
		grid-template-areas:
			'header header header header header header'
			'menu main main main main ad'
			'footer footer footer footer footer footer';
		grid-template-columns: repeat(6, 1fr);
		grid-template-rows: 1fr 4fr 1fr;
	}
}