dlordi/demo-grid-layout.html

## demo-grid-layout.html
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Grid Sample</title>
	<style>
		.site {
			display: grid;
			grid-template:
				"header header  header  header" auto
				".      content sidebar .     " auto
				"footer footer  footer  footer" auto /
				1fr     40em    20em    1fr;
			;
		}

		.site__header {
			grid-area: header;
			background-color: red;
		}

		.site__main {
			grid-area: content;
			background-color: white;
		}

		.site__aside {
			grid-area: sidebar;
			background-color: green;
		}

		.site__footer {
			grid-area: footer;
			background-color: blue;
		}
	</style>
</head>

<body>

	<div class="site">
		<div class="site__header">
			header
		</div>
		<div class="site__main">
			main
		</div>
		<div class="site__aside">
			aside
		</div>
		<div class="site__footer">
			footer
		</div>
	</div>

</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Grid Sample</title>
	<style>
	.site {
	display: grid;
	grid-template:
	"header header header header" auto
	". content sidebar . " auto
	"footer footer footer footer" auto /
	1fr 40em 20em 1fr;
	;
	}

	.site__header {
	grid-area: header;
	background-color: red;
	}

	.site__main {
	grid-area: content;
	background-color: white;
	}

	.site__aside {
	grid-area: sidebar;
	background-color: green;
	}

	.site__footer {
	grid-area: footer;
	background-color: blue;
	}
	</style>
	</head>

	<body>

	<div class="site">
	<div class="site__header">
	header
	</div>
	<div class="site__main">
	main
	</div>
	<div class="site__aside">
	aside
	</div>
	<div class="site__footer">
	footer
	</div>
	</div>

	</body>

	</html>