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