@charset "UTF-8"; /* CSS Document */

body {margin:10px;}
header {grid-area:hd;}
footer {grid-area:ft;}
section {grid-area:main;}
aside {grid-area:sidebar;}

.grid-container {
	background:#f2f2f2;
	color:#777;
	display:grid;
	grid-gap:5px 1px;
	grid-template-areas:
		"hd"
		"main"
		"sidebar"
		"ft"
}

header {
	background:#e7e4e4;
	color:#000;
	padding:10px 10px 40px 10px;
	border-radius:1px;
}

section {
	background:#f2f2f2;
	color:#000;
	padding:0 50px 0 25px;
	border-radius:1px;
}

footer {
	background:#999;
	color:#000;
	padding:0 50px 0 25px;
	border-radius:1px;
}

aside {
	background:linear-gradient(to bottom, #ffcc99 0%, #996633 100%);
	color:#000;
	padding:25px;
	border-radius:1px;
	}

/* header and footer span across
@media (min-width:640px) {
	.grid-container {
		grid-template-columns:2fr 4fr;
		grid-template-areas:
			"hd hd"
			"sidebar main"
			"ft ft"
	}
} */

/*skip a track by adding a dot to what we want to skip */
/* @media (min-width:640px) {
	.grid-container {
		grid-template-columns:2fr 4fr;
		grid-template-areas:
			"hd hd"
			"sidebar main"
			". ft"
	} */
	

@media (min-width:640px) {
	.grid-container {
		grid-template-columns:400px 4fr;
		grid-template-areas:
			"hd hd"
			"sidebar main"
			"ft ft"
	}		
	}
	
	<!-- @media (min-width:640px) {.grid-container {grid-template-columns:400px 4fr;  grid-template-areas:"hd hd" "sidebar main" "ft ft"}}