CSS
Build a Holy Grail Layout with CSS Grid
Construct the popular Holy Grail layout (header, footer, main content, and two sidebars) efficiently using CSS Grid's template areas for a clean and maintainable webpage structure.
.holy-grail-layout {
display: grid;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
grid-template-rows: auto 1fr auto; /* Header/footer auto height, main content takes remaining space */
grid-template-columns: 200px 1fr 200px; /* Nav/Aside 200px, Main content takes remaining */
min-height: 100vh; /* Ensure layout takes full viewport height */
}
.header { grid-area: header; background-color: lightblue; padding: 20px; }
.nav { grid-area: nav; background-color: lightgreen; padding: 20px; }
.main { grid-area: main; background-color: lightcoral; padding: 20px; }
.aside { grid-area: aside; background-color: lightsalmon; padding: 20px; }
.footer { grid-area: footer; background-color: lightgray; padding: 20px; }
/* Basic responsive adjustment for smaller screens */
@media (max-width: 768px) {
.holy-grail-layout {
grid-template-areas:
"header"
"nav"
"main"
"aside"
"footer";
grid-template-rows: auto auto 1fr auto auto;
grid-template-columns: 1fr;
}
}
How it works: This snippet uses CSS Grid's `grid-template-areas` to define a classic "Holy Grail" layout. Named areas (header, nav, main, aside, footer) are assigned to grid items, making the layout structure visually clear. `grid-template-rows` and `grid-template-columns` define the size of each row and column, using `1fr` to make the main content area fill available space and `auto` for header/footer/sidebars to size based on content. A basic media query is included for mobile responsiveness, stacking elements vertically.