holy grail with flexbox
<div class="container">
<header>HEADER</header>
<main>MAIN CONTENT</main>
<aside class="left-sidebar">LEFT SIDEBAR</aside>
<aside class="right-sidebar">RIGHT SIDEBAR</aside>
<footer>FOOTER</footer>
</div>holy grail flexbox layout
/**
* Make body at least 100% height
* You can also use a combination
* of height: 100% in <html> and
* min-height: 100% in <body>.
*/
.holy-grail {
min-height: 100vh;
}
/**
* Let's do a column distribution
* (mobile first)
* flex value is 1 1 auto to make
* body skrinkable and extensible
*/
.holy-grail,
.holy-grail-body {
display: flex;
flex: 1 1 auto;
flex-direction: column;
}
/**
* Content body item is made
* extensible too.
*/
.holy-grail-content {
flex: 1 1 auto;
}
/**
* Put the first sidebar before content.
* If you need sidebar to be before content
* only in big screen put those 3 next lines
* in @media block.
*/
.holy-grail-sidebar-1 {
order: -1;
}
/**
* Let's introduce bigger screen
*/
@media (min-width: 768px) {
/**
* Body items are now side by side
*/
.holy-grail-body {
flex-direction: row;
}
/**
* Sidebars have a basic 260 width
* and are not really flexible anymore
*/
.hg-sidebar {
flex: 0 0 260px;
}
}holy grail flexbox layout
<body class="holy-grail">
<header>
<!-- header content -->
</header>
<div class="holy-grail-body">
<section class="holy-grail-content">
<!-- Main page content -->
</section>
<div class="holy-grail-sidebar-1 hg-sidebar">
<!-- sidebar 1 content -->
</div>
<div class="holy-grail-sidebar-2 hg-sidebar">
<!-- sidebar 2 content -->
</div>
</div>
<footer>
<!-- footer content -->
</footer>
</body>Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
