Holy Grail layout is a layout with a fixed height header and footer, and a center with 3 columns.

The 3 columns include a fixed width sidenav, a fluid center, and a column for other content. 

HTML


<div class="container">
 <header class="header">Header</header>
 <div class="content-body">
 <main class="content">Content</main>
 <nav class="sidenav">Nav</nav>
 <aside class="ads">Ads</aside>
 </div>
 <footer class="footer">Footer</footer>
</div>

CSS


body {
 margin: 0;
 padding: 0;
}

.container {
 display: flex;
 flex-direction: column;
 height: 100vh;
}

.header {
 flex: 0 0 50px;
}

.content-body {
 flex: 1 1 auto;
 display: flex;
 flex-direction: row;
}

.content-body .content {
 flex: 1 1 auto;
 overflow: auto;
}

.content-body .sidenav {
 order: -1;
 flex: 0 0 100px;
 overflow: auto;
}

.content-body .ads {
 flex: 0 0 100px;
 overflow: auto;
}

.footer {
 flex: 0 0 50px;
}

NOTE: This example is from a book "CSS Notes for Professionals"

0 Comments

Leave a reply

Your email address will not be published. required fields are marked *