Skip to content

Instantly share code, notes, and snippets.

Created October 13, 2016 12:57
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save takanorip/f2259b501e62c072e981466576325e8d to your computer and use it in GitHub Desktop.
Holy Grail Layout
<div class="holyGrail">
<main class="content">HolyGrail</main>
<nav class="side-nav">nav</nav>
<aside class="side-bar">side</aside>
body {
display: -webkit-flex;
display: flex;
margin: 0;
padding: 0;
min-height: 100vh;
flex-direction: column;
text-align: center;
footer {
width: 100%;
padding: 2% 0;
font-size: 1.2rem;
color: #fff;
flex: 0;
header {
background: #006e54;
footer {
background: #727171;
.holyGrail {
display: flex;
flex: 1;
.content {
flex: 1;
width: 200px;
background: #fddea5;
.side-nav {
order: -1;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment