CSS
Holy Grail Layout with CSS Grid Areas
Construct the classic Holy Grail layout (header, footer, main content, and sidebars) efficiently using CSS Grid areas for a robust and maintainable page structure.
.holy-grail-layout {
display: grid;
/* Defines three columns: fixed-width/fluid nav, fluid main, fixed-width/fluid aside */
grid-template-columns: minmax(150px, 1fr) 3fr minmax(150px, 1fr);
/* Defines three rows: auto-height header, fluid content, auto-height footer */
grid-template-rows: auto 1fr auto;
/* Names grid areas for easier layout management */
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
min-height: 100vh; /* Ensures layout takes full viewport height */
}
header { grid-area: header; background-color: #ffeb3b; padding: 20px; }
nav { grid-area: nav; background-color: #cddc39; padding: 20px; }
main { grid-area: main; background-color: #8bc34a; padding: 20px; }
aside { grid-area: aside; background-color: #4caf50; padding: 20px; }
footer { grid-area: footer; background-color: #2196f3; padding: 20px; }
/* Example for responsiveness: stack columns on smaller screens */
@media (max-width: 768px) {
.holy-grail-layout {
grid-template-columns: 1fr;
grid-template-rows: auto auto 1fr auto auto;
grid-template-areas:
"header"
"nav"
"main"
"aside"
"footer";
}
}
How it works: This snippet provides a robust solution for the 'Holy Grail' layout using CSS Grid areas. `display: grid;` establishes the grid. `grid-template-columns` and `grid-template-rows` define the overall structure, using `minmax()` and `fr` units for flexibility. The `grid-template-areas` property is the core, allowing you to visually map out your layout by naming sections (e.g., 'header', 'main'). Each child element is then assigned to its respective area using `grid-area`. This approach makes the layout highly readable and easy to modify, especially when combined with media queries for responsiveness.