Skip to content

Instantly share code, notes, and snippets.

@takanorip

takanorip/holy-grail-layout.markdown

Created October 13, 2016 12:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save takanorip/f2259b501e62c072e981466576325e8d to your computer and use it in GitHub Desktop.
Save takanorip/f2259b501e62c072e981466576325e8d to your computer and use it in GitHub Desktop.
Download ZIP
Holy Grail Layout
Raw
index.html
<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>
Raw
style.css
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