CSS
Classic 'Holy Grail' Layout with Named CSS Grid Areas
Implement the classic 'Holy Grail' layout (header, footer, main content, two sidebars) using CSS Grid named areas. Achieves a clear, semantic structure and responsive design.
.holy-grail-layout {
display: grid;
grid-template-columns: 200px 1fr 150px; /* Left Sidebar, Content, Right Sidebar */
grid-template-rows: auto 1fr auto; /* Header, Main Area (flexible), Footer */
grid-template-areas:
"header header header"
"nav content sidebar"
"footer footer footer";
min-height: 100vh; /* Ensures layout takes full viewport height */
}
header { grid-area: header; background-color: #333; color: white; padding: 1rem; text-align: center; }
nav { grid-area: nav; background-color: #f0f0f0; padding: 1rem; }
main { grid-area: content; background-color: #fff; padding: 1rem; }
aside { grid-area: sidebar; background-color: #e0e0e0; padding: 1rem; }
footer { grid-area: footer; background-color: #333; color: white; padding: 1rem; text-align: center; }
/* Example for basic responsiveness */
@media (max-width: 768px) {
.holy-grail-layout {
grid-template-columns: 1fr; /* Single column layout */
grid-template-areas:
"header"
"nav"
"content"
"sidebar"
"footer";
}
}
How it works: This snippet constructs the classic 'Holy Grail' layout, comprising a header, footer, main content area, and two sidebars, using CSS Grid's named areas. `grid-template-areas` provides a highly readable and maintainable way to define the layout structure. Elements are then assigned to these areas using the `grid-area` property. This approach makes complex layouts easy to visualize and modify, especially for responsiveness, as demonstrated by the media query example that redefines the grid areas for smaller screens into a single column.