CSS
Build a Holy Grail Layout with CSS Grid Named Areas
Efficiently construct the classic "Holy Grail" page layout (header, nav, main, sidebar, footer) using CSS Grid's powerful named grid areas for clarity and responsiveness.
.grid-container {
display: grid;
grid-template-columns: 1fr 4fr 1fr; /* Example: Sidebar | Main | Aside */
grid-template-rows: auto 1fr auto; /* Header | Content | Footer */
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
min-height: 100vh; /* Ensure full viewport height */
}
.header { grid-area: header; background-color: #333; color: white; padding: 15px; text-align: center; }
.nav { grid-area: nav; background-color: #eee; padding: 15px; }
.main { grid-area: main; background-color: #f9f9f9; padding: 20px; }
.aside { grid-area: aside; background-color: #eee; padding: 15px; }
.footer { grid-area: footer; background-color: #333; color: white; padding: 15px; text-align: center; }
/* Basic responsive adjustment for smaller screens */
@media (max-width: 768px) {
.grid-container {
grid-template-columns: 1fr;
grid-template-areas:
"header"
"nav"
"main"
"aside"
"footer";
}
}
How it works: This snippet constructs a "Holy Grail" layout using CSS Grid's named areas. `grid-template-areas` provides a highly readable and semantic way to define the layout structure, making it easy to visualize. The `grid-template-columns` and `grid-template-rows` properties define the size of the tracks. Elements are then assigned to these areas using `grid-area`. A media query is included to demonstrate basic responsiveness by stacking elements vertically on smaller screens, showcasing Grid's adaptability.