<header>
    <h1>Holy Grail layout made easy with flexbox</h1>
  </header>
  <div class="layout__body">
    <main class="layout__content">...</main>
    <nav class="layout__nav layout__columns">...</nav>
    <aside class="layout__aside layout__columns">...</aside>
  </div>
  <footer>
    
    <a href="https://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/">Adapted from this awesome site</a>
    
 </footer>
body {
  display: flex;
  flex-direction: column;
}

.layout__body {
  display: flex;
  flex: 1;
}

.layout__content {
  flex: 1;
}
.layout__columns {
  flex: 0 0 12em;
}
.layout__nav {
  order: -1;
}







.layout__content {
  background: orange;
}
.layout__columns {
  background: green;
}
header, footer {
  background: #000;
  color: #fff;
  padding: 10px;
}
footer a {
  flex: 1;
}
h1 {
  margin: 0;
  font-size: 15px;
}
html,body {
  height: 100%;
  margin: 0;
  font-family: Helvetica;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.