.container 
{ 
	background: #FFFFFF; 
	height:100vh; 
	display: grid; 
	grid-template-rows: 300px 1fr 50px; 
	grid-template-columns: 1fr 1fr 1fr; 
	grid-row-gap: 10px; 
} 

header 
{ 
	background: #BCF1FF; 
	grid-column-start:2; 
	grid-column-end:3; 
	grid-row-start:1; 
	grid-row-end:2; 
	justify-self: center;
	align-self: center;
} 

article
{ 
	background: #F0F0F0; 
	grid-column-start:2; 
	grid-column-end:3;
	grid-row-start:2; 
	grid-row-end:3; 
	text-align: center;
} 

footer 
{ 
	background: #A0A0A0;
	height: 50px; 
	grid-column-start:2; 
	grid-column-end:3; 
	grid-row-start:3; 
	grid-row-end:4; 
	text-align: center;
	vertical-align: middle;
}

article101
{ 
	background: #23CCC2; 
	width: 180px;
	height: 180px;
	grid-column-start:2; 
	grid-column-end:3; 
	grid-row-start:2; 
	grid-row-end:3; 
	justify-self: center;
	align-self: center;
} 

article201
{ 
	background: #A3A3A3; 
	width: 180px;
	height: 180px;
	grid-column-start:3; 
	grid-column-end:4; 
	grid-row-start:2; 
	grid-row-end:3;
	justify-self: center;
	align-self: center;
} 

article301
{ 
	background: #A3A3A3; 
	width: 180px;
	height: 180px;
	grid-column-start:4; 
	grid-column-end:5; 
	grid-row-start:2; 
	grid-row-end:3;
	justify-self: center;
	align-self: center;
} 

article401
{ 
	background: #A3A3A3; 
	width: 180px;
	height: 180px;
	grid-column-start:5; 
	grid-column-end:6; 
	grid-row-start:2; 
	grid-row-end:3;
	justify-self: center;
	align-self: center;
} 

article501
{ 
	background: #23CCC2;  
	width: 180px;
	height: 180px;
	grid-column-start:6; 
	grid-column-end:7; 
	grid-row-start:2; 
	grid-row-end:3;
	justify-self: center;
	align-self: center;
}