CSS
Responsive Holy Grail Layout with CSS Grid
Create a classic "holy grail" web layout with header, navigation, main content, sidebar, and footer using CSS Grid's powerful `grid-template-areas` for full responsiveness across devices.
/* HTML Structure Example: */
/*
<div class="holy-grail-layout">
<header>Header</header>
<nav>Navigation</nav>
<main>Main Content</main>
<aside>Sidebar</aside>
<footer>Footer</footer>
</div>
*/
.holy-grail-layout {
display: grid;
min-height: 100vh; /* Ensure layout takes full viewport height */
grid-template-columns: 1fr; /* Single column for small screens */
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header"
"nav"
"main"
"aside"
"footer";
}
header { grid-area: header; background-color: #f8f8f8; padding: 1em; }
nav { grid-area: nav; background-color: #e0e0e0; padding: 1em; }
main { grid-area: main; background-color: #ffffff; padding: 1em; }
aside { grid-area: aside; background-color: #f0f0f0; padding: 1em; }
footer { grid-area: footer; background-color: #d8d8d8; padding: 1em; }
@media (min-width: 768px) {
.holy-grail-layout {
grid-template-columns: 200px 1fr 250px; /* Nav, Main, Sidebar */
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
}
}
How it works: This snippet creates a classic "holy grail" layout using CSS Grid's `grid-template-areas`. It defines named areas for header, navigation, main content, sidebar, and footer. On small screens, these areas stack vertically. For larger screens (768px and up), a media query redefines the grid to a three-column layout, placing the navigation and sidebar alongside the main content, maintaining a responsive and adaptable design.