Grid Layout - GridArea, GridTemplate

<!DOCTYPE html>
<html><head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
	<title>Grid Layout</title>
	<style media="all" type="text/css">
html, body, #site {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
#site {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	grid-template-rows: auto 1fr 3fr;
	grid-template-areas:
		"title title title"
		"main aside nav"
		"main aside footer";
}
#site > header {
	grid-area: title;
	background: #A0A0C0;
}
#site > nav {
	grid-area: nav;
	background: #A0C0A0;
}
#site > main {
	grid-area: main;
	background: #C0A0A0;
}
#site > aside {
	grid-area: aside;
	background: #C0C0A0;
}
#site > footer {
	grid-area: footer;
	background: #C0C0C0;
}
@media screen and (min-width: 34em) {
	#site {
		grid-template-columns: 2fr 1fr 1fr;
		grid-template-areas: 
			"title title nav"
			"main main aside"
			"main main footer"
	}
}
	</style>
</head><body>
	<div id="site">
		<header><h1>This an header</h1></header>
		<nav>
			Navigation
		</nav>
		<main>
			Contents
		</main>
		<aside>
			Something
		</aside>
		<footer>
			Footer
		</footer>
	</div>
</body></html>
EugeneX MiniWeb

User Tools

Site Tools

Grid Layout - GridArea, GridTemplate

Page Tools
