Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Holy Grail Layout
<body>
<header>header</header>
<div class="holyGrail">
<main class="content">HolyGrail</main>
<nav class="side-nav">nav</nav>
<aside class="side-bar">side</aside>
</div>
<footer>footer</footer>
</body>
body {
display: -webkit-flex;
display: flex;
margin: 0;
padding: 0;
min-height: 100vh;
flex-direction: column;
text-align: center;
}
header,
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;
}
.side-nav,
.side-bar{
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