CSS/HTML
Classic Holy Grail Layout with CSS Grid Areas
Implement the classic 'Holy Grail' layout (header, footer, main content with left and right sidebars) efficiently using CSS Grid `grid-template-areas` for robust and readable structure.
<div class="holy-grail-layout">
<header class="header">Header</header>
<nav class="left-sidebar">Left Sidebar</nav>
<main class="main-content">Main Content</main>
<aside class="right-sidebar">Right Sidebar</aside>
<footer class="footer">Footer</footer>
</div>
<style>
body { margin: 0; font-family: Arial, sans-serif; }
.holy-grail-layout {
display: grid;
grid-template-columns: 1fr 4fr 1fr; /* Left, Main, Right columns */
grid-template-rows: auto 1fr auto; /* Header, Content, Footer rows */
grid-template-areas:
"header header header"
"left-sidebar main-content right-sidebar"
"footer footer footer";
min-height: 100vh; /* Ensure layout takes full viewport height */
}
.header { grid-area: header; background-color: #f8f8f8; padding: 20px; text-align: center; border-bottom: 1px solid #eee; }
.left-sidebar { grid-area: left-sidebar; background-color: #e8e8e8; padding: 20px; }
.main-content { grid-area: main-content; background-color: #ffffff; padding: 20px; }
.right-sidebar { grid-area: right-sidebar; background-color: #e8e8e8; padding: 20px; }
.footer { grid-area: footer; background-color: #f8f8f8; padding: 20px; text-align: center; border-top: 1px solid #eee; }
/* Basic responsiveness: stack columns on small screens */
@media (max-width: 768px) {
.holy-grail-layout {
grid-template-columns: 1fr; /* Single column layout */
grid-template-areas:
"header"
"left-sidebar"
"main-content"
"right-sidebar"
"footer";
}
}
</style>
How it works: This snippet builds the classic 'Holy Grail' layout using CSS Grid `grid-template-areas`. Named grid areas are first defined on the parent container. Then, individual child elements are assigned to these areas using the `grid-area` property. This approach makes the layout highly readable and maintainable. `grid-template-columns` and `grid-template-rows` define the sizes of the columns and rows. A media query demonstrates how to easily adapt the layout for smaller screens by stacking the elements vertically.