CSS
Implement a Holy Grail Layout with CSS Grid
Construct the classic "Holy Grail" layout (header, footer, main content with two sidebars) efficiently using CSS Grid for a robust and adaptable web page structure.
body {
margin: 0;
font-family: sans-serif;
min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto; /* Header, Main (takes remaining space), Footer */
grid-template-columns: auto 1fr auto; /* Left Sidebar, Main Content, Right Sidebar */
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
}
header {
grid-area: header;
background-color: #333;
color: white;
padding: 1rem;
}
nav { /* Left Sidebar */
grid-area: nav;
background-color: #f0f0f0;
padding: 1rem;
}
main {
grid-area: main;
background-color: #fff;
padding: 1rem;
}
aside { /* Right Sidebar */
grid-area: aside;
background-color: #f0f0f0;
padding: 1rem;
}
footer {
grid-area: footer;
background-color: #333;
color: white;
padding: 1rem;
text-align: center;
}
/* Basic responsiveness */
@media (max-width: 768px) {
body {
grid-template-columns: 1fr; /* Single column */
grid-template-areas:
"header"
"nav"
"main"
"aside"
"footer";
}
nav, aside {
text-align: center; /* Center content on small screens */
}
}
How it works: This snippet provides a flexible implementation of the "Holy Grail" layout using CSS Grid. `display: grid` on the `body` establishes the grid. `grid-template-rows` and `grid-template-columns` define the basic structure. `grid-template-areas` then assigns specific areas (header, nav, main, aside, footer) to grid items, making the layout highly readable and maintainable. A media query is included to transform the layout into a single column stack on smaller screens, demonstrating responsiveness.