CSS
Building a Holy Grail Layout with CSS Grid grid-template-areas
Implement the classic Holy Grail layout (header, footer, main content with two sidebars) using CSS Grid's named `grid-template-areas` for clear, readable, and maintainable structure.
.holy-grail-layout {
display: grid;
grid-template-columns: 1fr 4fr 1fr; /* Sidebar | Main | Sidebar */
grid-template-rows: auto 1fr auto; /* Header | Content | Footer */
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
min-height: 100vh; /* Make layout fill viewport height */
}
.header { grid-area: header; background-color: #f2f2f2; padding: 20px; text-align: center; }
.nav { grid-area: nav; background-color: #e6e6e6; padding: 15px; }
.main { grid-area: main; background-color: #ffffff; padding: 20px; }
.aside { grid-area: aside; background-color: #e6e6e6; padding: 15px; }
.footer { grid-area: footer; background-color: #f2f2f2; padding: 20px; text-align: center; }
/* Basic responsiveness for smaller screens */
@media (max-width: 768px) {
.holy-grail-layout {
grid-template-columns: 1fr;
grid-template-rows: auto auto 1fr auto auto; /* Header | Nav | Main | Aside | Footer */
grid-template-areas:
"header"
"nav"
"main"
"aside"
"footer";
}
}
/* --- HTML Structure --- */
<div class="holy-grail-layout">
<header class="header"><h1>Website Header</h1></header>
<nav class="nav"><ul><li>Link 1</li><li>Link 2</li></ul></nav>
<main class="main"><p>Main content area. This is where your primary information goes.</p></main>
<aside class="aside"><p>Sidebar content.</p></aside>
<footer class="footer"><p>© 2023 My Website</p></footer>
</div>
How it works: This snippet constructs the classic Holy Grail layout using CSS Grid. `display: grid` enables grid layout. `grid-template-columns` and `grid-template-rows` define the column and row tracks. The power comes from `grid-template-areas`, which provides a visual ASCII-art-like representation of the layout. Each child element then uses `grid-area` to assign itself to a named area. A media query is included to reflow the layout for smaller screens, stacking elements vertically for better mobile experience.