<h1>My<strong>Application</strong></h1>

<nav>
  <h2>My Projects</h2>
  <ul>
    <li><a href="#"></a>Project 1</a></li>
    <li><a href="#"></a>Project 2</a></li>
    <li><a href="#"></a>Project 3</a></li>
    <li><a href="#"></a>Project 4</a></li>
    <li><a href="#"></a>Project 5</a></li>
    <li><a href="#"></a>Project 6</a></li>
    <li><a href="#"></a>Project 7</a></li>
    <li><a href="#"></a>Project 8</a></li>
    <li><a href="#"></a>Project 9</a></li>
    <li><a href="#"></a>Project 10</a></li>
  </ul>
</nav>

<article>
  <h2>Project Title</h2>
  <p>
    All the main content lives in here. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem eius cumque, nihil nesciunt qui ea vero consequatur, dignissimos maxime ratione itaque amet, ab aliquid recusandae illo quibusdam debitis? Deserunt, saepe.
  </p>
</article>

<footer>
  Copyright (c) 1017 Nobody Ever
</footer>
// Full height!
body {
  height: 100vh;
}


// Grid layout
body {
  display: grid;
  grid-template-areas: 'header header'
                       'nav main'
                       'footer footer';
  grid-template-columns: minmax(auto, 12em) 5fr;
  grid-template-rows: auto 1fr auto;
}

h1 {
  grid-area: header;
}

footer {
  grid-area: footer;
}

nav {
  grid-area: nav;
}


article {
  grid-area: main;
}


// Style
* {
  box-sizing: border-box;
}

h1, footer {
  background: lightgray;
}

nav {
  border-right: 1px solid lightgray;
}

nav, article {
  overflow-y: auto;
}

h1, nav, article, footer {
  padding: 1rem;
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.