CSS
Flexible Holy Grail Layout with CSS Flexbox
Create a classic Holy Grail layout using CSS Flexbox for flexible header, footer, main content, and sidebars, ensuring adaptability across screen sizes.
<style>
.holy-grail-layout {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.header, .footer {
background-color: #333;
color: white;
padding: 1rem;
text-align: center;
}
.main-content-wrapper {
display: flex;
flex-grow: 1; /* Allows main content to take remaining space */
}
.sidebar {
width: 200px;
background-color: #f0f0f0;
padding: 1rem;
flex-shrink: 0; /* Prevents shrinking */
}
.main-content {
flex-grow: 1;
padding: 1rem;
background-color: #fff;
}
/* Optional: Reorder sidebars for mobile (example) */
@media (max-width: 768px) {
.main-content-wrapper {
flex-direction: column;
}
.sidebar {
width: auto;
}
.sidebar-left { order: 2; }
.main-content { order: 1; }
.sidebar-right { order: 3; }
}
</style>
<div class="holy-grail-layout">
<header class="header">Header</header>
<div class="main-content-wrapper">
<aside class="sidebar sidebar-left">Left Sidebar</aside>
<main class="main-content">Main Content Area</main>
<aside class="sidebar sidebar-right">Right Sidebar</aside>
</div>
<footer class="footer">Footer</footer>
</div>
How it works: This snippet demonstrates how to build a flexible 'Holy Grail' layout using CSS Flexbox. The outer container uses `flex-direction: column` to stack the header, main content wrapper, and footer. The `main-content-wrapper` then uses `display: flex` with `flex-grow: 1` to expand and contain the two sidebars and the main content. Sidebars have fixed widths and `flex-shrink: 0`, while the `main-content` also uses `flex-grow: 1` to fill the remaining horizontal space. A media query is included to stack elements vertically on smaller screens and reorder them using the `order` property for better mobile user experience.