*{
	margin:0;
	padding:0;
}

.container{
	display:grid;
	grid-template-columns: 35% 65%;
	grid-template-areas:
	"header header"
	"sidepanel sidepanel"
	"mainpanel mainpanel"
	"footer footer";
}

header{
	grid-area: header;
	height: 60px;
	background: crimson;
}

.sidepanel{
	grid-area: sidepanel;
}

.mainpanel{
	grid-area: mainpanel;
}

footer{
	grid-area: footer;
}

.container div:nth-child(even){
	background: red;
}
.container div:nth-child(odd){
	background: purple;
}

@media screen and (min-width: 736px){
	.container{
		display: grid;
		grid-template-columns: 5% 30% 60% 5%;
		grid-template-areas:
		". header header ."
		". sidepanel mainpanel ."
		". sidepanel footer .";
	}
}