csalzman · July 27, 2017 15:05
diff --git a/basic-grid-example.html b/basic-grid-example.html
 <!DOCTYPE html>
 <html>
 	<head>
 		<style>
 			body {
 				display: grid;
 				grid-template-columns:1fr 1fr;
 			}

 			header,
 			footer {
 				grid-column: 1 / 3;
 			}

 			article {
 				grid-column: 1 / 2;
 			}

 			aside {
 				grid-column: 2 /3;
 			}

 			/*Responsive styling*/

 			@media screen and (max-width:800px) {
 				header,
 				footer,
 				article,
 				aside {
 					grid-column: 1 / 3;
 				}
 			}


 			/*Additional styling split out for clarity*/

 			body {
 				max-width: 1200px;
 				margin:auto;
 				background-color:gray;
 				color: white;
 			}

 			header {
 				background-color:blue;
 			}

 			article {
 				background-color:red;	
 			}

 			aside {
 				background-color: green;
 			}

 			footer {
 				background-color: orange;
 				text-align: center;
 			}

 		</style>
 	</head>

 	<body>
 		<header>
 			<h1>I'm an h1! I span the full width of the grid.</h1>
 		</header>

 		<article>
 			<h2>I'm an h2 for the article</h2>
 			<p>I'm the article's text! I only take up half of the width of the grid because grid-column is set to "1 / 2". This starts me at the leftmost vertical line in the grid and takes me to the second line. We've defined two columns using grid-template-columns which means there are three vertical lines in the grid.</p>
 		</article>

 		<aside>
 			<h2>I'm an h2 for an aside!</h2>
 			<p>I'm an aside! I take up the second half of the width of the grid because my grid-column is set to "2 / 3".</p>
 		</aside>

 		<footer>
 			<p>I'm a footer! I'm down below and span the full width of the grid. My text is center aligned.</p>
 		</footer>
 	</body>

 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	body {
	display: grid;
	grid-template-columns:1fr 1fr;
	}

	header,
	footer {
	grid-column: 1 / 3;
	}

	article {
	grid-column: 1 / 2;
	}

	aside {
	grid-column: 2 /3;
	}

	/Responsive styling/

	@media screen and (max-width:800px) {
	header,
	footer,
	article,
	aside {
	grid-column: 1 / 3;
	}
	}


	/Additional styling split out for clarity/

	body {
	max-width: 1200px;
	margin:auto;
	background-color:gray;
	color: white;
	}

	header {
	background-color:blue;
	}

	article {
	background-color:red;
	}

	aside {
	background-color: green;
	}

	footer {
	background-color: orange;
	text-align: center;
	}

	</style>
	</head>

	<body>
	<header>
	<h1>I'm an h1! I span the full width of the grid.</h1>
	</header>

	<article>
	<h2>I'm an h2 for the article</h2>
	<p>I'm the article's text! I only take up half of the width of the grid because grid-column is set to "1 / 2". This starts me at the leftmost vertical line in the grid and takes me to the second line. We've defined two columns using grid-template-columns which means there are three vertical lines in the grid.</p>
	</article>

	<aside>
	<h2>I'm an h2 for an aside!</h2>
	<p>I'm an aside! I take up the second half of the width of the grid because my grid-column is set to "2 / 3".</p>
	</aside>

	<footer>
	<p>I'm a footer! I'm down below and span the full width of the grid. My text is center aligned.</p>
	</footer>
	</body>

	</html>