csalzman/basic-grid-example.html

## 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>