CSS
Holy Grail Layout using CSS Grid
Implement the classic Holy Grail layout with header, footer, main content, and two sidebars efficiently using CSS Grid's powerful layout capabilities.
.holy-grail-layout {
display: grid;
grid-template-columns: 200px 1fr 200px; /* Left sidebar, main content, right sidebar */
grid-template-rows: auto 1fr auto; /* Header, content, footer */
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
min-height: 100vh; /* Example: take full viewport height */
}
.header { grid-area: header; background: lightcoral; padding: 10px; }
.nav { grid-area: nav; background: lightblue; padding: 10px; }
.main { grid-area: main; background: lightgreen; padding: 10px; }
.aside { grid-area: aside; background: lightyellow; padding: 10px; }
.footer { grid-area: footer; background: lightgray; padding: 10px; }
/* Basic responsiveness for smaller screens */
@media (max-width: 768px) {
.holy-grail-layout {
grid-template-columns: 1fr; /* Single column */
grid-template-rows: auto auto 1fr auto auto auto; /* Header, nav, main, aside, footer */
grid-template-areas:
"header"
"nav"
"main"
"aside"
"footer";
}
}
How it works: This snippet shows how to create the popular Holy Grail layout using CSS Grid. `grid-template-columns` and `grid-template-rows` define the grid structure, while `grid-template-areas` assigns named areas to specific grid cells. Each layout section (header, nav, main, aside, footer) is then assigned to its respective grid area using the `grid-area` property. A basic media query provides a responsive fallback for smaller screens by stacking the elements into a single column.