<html>
<head>
<title>CSS Grid Layout</title>
<link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container">
<header>Header</header>
<nav>Nav</nav>
<main>Main</main>
<aside>Aside</aside>
<footer>Footer</footer>
</div>
</body>
</html>
/* =====================================
Grid Layout
======================================== */
.container {
height: 100vh;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 100px 100px repeat(2, minmax(150px, auto)) 100px;
/* grid-auto-rows: minmax(150px, auto);/*grid autorows gives control over the size of implicit row tracks */
grid-gap: 10px;
grid-template-areas: /* this is the default which works for mobile phones*/
"header"
"nav"
"main"
"aside"
"footer";
}
header {
grid-area: header;
}
nav {
grid-area: nav;
}
main {
grid-area: main;
}
aside {
grid-area: aside;
}
footer {
grid-area: footer;
}
@media (min-width: 768px) {
.container {
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 100px minmax(150px, auto) 100px;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
}
}
@media (min-width: 992px) {
.container {
grid-template-areas:
"header header header"
"nav main aside"
"nav footer footer";
}
}
/* =====================================
Page Styles
======================================== */
* {
box-sizing: border-box;
}
body {
font-size: 1.4em;
font-family: 'Varela Round', sans-serif;
font-weight: bold;
padding: 0;
margin: 0;
}
.container > * {
color: #fff;
text-shadow: 0 2px 0 rgba(110,133,156,0.12);
padding: 0.85em;
border: solid 1px rgba(110,133,156,0.15);
}
header {
background-color: #3f8abf;
}
nav {
background-color: #fbaea8;
}
main {
background-color: #aad2ed;
}
aside {
background-color: #6ad78a;
}
footer {
background-color: #6e859c;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.