<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;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.