CSS
Build a Holy Grail Layout using CSS Grid
Create the classic "Holy Grail" three-column layout (header, nav, content, sidebar, footer) efficiently using modern CSS Grid.
.holy-grail-layout {
display: grid;
grid-template-areas:
"header header header"
"nav content sidebar"
"footer footer footer";
grid-template-columns: 200px 1fr 200px; /* nav, content, sidebar widths */
grid-template-rows: auto 1fr auto; /* header, content, footer heights */
min-height: 100vh; /* Ensures layout fills viewport height */
gap: 10px;
}
.header { grid-area: header; background-color: #f8f8f8; padding: 10px; }
.nav { grid-area: nav; background-color: #e8e8e8; padding: 10px; }
.content { grid-area: content; background-color: #fff; padding: 10px; }
.sidebar { grid-area: sidebar; background-color: #e8e8e8; padding: 10px; }
.footer { grid-area: footer; background-color: #f8f8f8; padding: 10px; }
/* Basic styling for visibility */
.holy-grail-layout > div {
border: 1px solid #ddd;
}
/* HTML structure for the snippet */
/*
<div class="holy-grail-layout">
<header class="header">Header</header>
<nav class="nav">Navigation</nav>
<main class="content">Main Content</main>
<aside class="sidebar">Sidebar</aside>
<footer class="footer">Footer</footer>
</div>
*/
How it works: This snippet uses CSS Grid's `grid-template-areas` property to define a classic "Holy Grail" layout. You name areas (like `header`, `nav`, `content`), and then assign those names to grid items. `grid-template-columns` and `grid-template-rows` define the size of the tracks, creating a robust, easily maintainable, and responsive layout structure. `1fr` ensures the content area takes up remaining space.