CSS
Implement the Classic Holy Grail Layout with CSS Grid
Construct the versatile 'Holy Grail' layout, featuring a header, footer, and a three-column main section (sidebar-content-sidebar), using the power of CSS Grid and `grid-template-areas`.
.holy-grail-layout {
display: grid;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
grid-template-columns: 150px 1fr 150px; /* Nav & Aside fixed, Main fills */
grid-template-rows: auto 1fr auto; /* Header/Footer auto, Main fills height */
min-height: 100vh; /* Ensures layout takes full viewport height */
gap: 10px; /* Spacing between grid areas */
}
.header { grid-area: header; background-color: #f8d7da; padding: 10px; }
.nav { grid-area: nav; background-color: #d1ecf1; padding: 10px; }
.main-content-grid { grid-area: main; background-color: #d4edda; padding: 10px; }
.aside { grid-area: aside; background-color: #ffeeba; padding: 10px; }
.footer { grid-area: footer; background-color: #bee5eb; padding: 10px; }
/* Basic responsiveness: stack columns on small screens */
@media (max-width: 768px) {
.holy-grail-layout {
grid-template-areas:
"header"
"nav"
"main"
"aside"
"footer";
grid-template-columns: 1fr; /* Single column */
grid-template-rows: auto auto 1fr auto auto; /* Main still fills space */
}
}
How it works: This snippet constructs the famous 'Holy Grail' layout using CSS Grid's `grid-template-areas`. It defines named areas for header, navigation, main content, aside, and footer, then assigns these areas to a grid. `grid-template-columns` and `grid-template-rows` define column/row sizes. A media query demonstrates how to flatten this layout into a single column for mobile responsiveness.