CSS
Implement the Holy Grail Layout with CSS Grid
Efficiently create the classic 'Holy Grail' layout with a header, footer, and three main columns (sidebar, content, sidebar) using modern CSS Grid techniques for responsiveness.
.holy-grail-layout {
display: grid;
grid-template-columns: 1fr 3fr 1fr; /* Left sidebar, main content, right sidebar */
grid-template-rows: auto 1fr auto; /* Header, main content, footer */
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
min-height: 100vh; /* Ensures layout fills viewport height */
}
.header { grid-area: header; background: #e0f2f7; padding: 1em; }
.nav { grid-area: nav; background: #cce7ef; padding: 1em; }
.main { grid-area: main; background: #f0faff; padding: 1em; }
.aside { grid-area: aside; background: #cce7ef; padding: 1em; }
.footer { grid-area: footer; background: #e0f2f7; padding: 1em; }
/* Basic responsiveness */
@media (max-width: 768px) {
.holy-grail-layout {
grid-template-columns: 1fr; /* Single column layout for small screens */
grid-template-rows: auto auto 1fr auto auto; /* Header, nav, main, aside, footer */
grid-template-areas:
"header"
"nav"
"main"
"aside"
"footer";
}
}
How it works: This snippet demonstrates the powerful capabilities of CSS Grid to construct the classic "Holy Grail" layout. By using `grid-template-areas`, we semantically name different sections of the page (header, nav, main, aside, footer) and define their placement within the grid structure. `grid-template-columns` and `grid-template-rows` specify the dimensions. A media query is included to gracefully transform the layout into a single column stack on smaller screens, showcasing Grid's inherent responsiveness.