CSS
Build a Responsive Holy Grail Layout with CSS Grid
Construct a classic web layout featuring a header, footer, main content, and two sidebars, all responsively managed with CSS Grid for flexible design.
/* HTML Structure */
/*
<div class="grid-container">
<header>Header</header>
<nav>Navigation</nav>
<aside class="left-sidebar">Left Sidebar</aside>
<main>Main Content</main>
<aside class="right-sidebar">Right Sidebar</aside>
<footer>Footer</footer>
</div>
*/
/* CSS */
.grid-container {
display: grid;
gap: 10px;
grid-template-areas:
"header header header"
"nav nav nav"
"left main right"
"footer footer footer";
grid-template-columns: 1fr 4fr 1fr;
grid-template-rows: auto auto 1fr auto;
min-height: 100vh;
}
header {
grid-area: header;
background-color: lightblue;
padding: 1rem;
}
nav {
grid-area: nav;
background-color: lightcoral;
padding: 1rem;
}
.left-sidebar {
grid-area: left;
background-color: lightgreen;
padding: 1rem;
}
main {
grid-area: main;
background-color: lightgoldenrodyellow;
padding: 1rem;
}
.right-sidebar {
grid-area: right;
background-color: lightgray;
padding: 1rem;
}
footer {
grid-area: footer;
background-color: lightsalmon;
padding: 1rem;
}
@media (max-width: 768px) {
.grid-container {
grid-template-areas:
"header"
"nav"
"left"
"main"
"right"
"footer";
grid-template-columns: 1fr;
grid-template-rows: auto auto auto 1fr auto auto;
}
}
How it works: This CSS Grid snippet creates a flexible 'Holy Grail' layout, a common web design pattern. It uses `grid-template-areas` to visually define the layout structure with named areas (header, nav, left, main, right, footer). `grid-template-columns` and `grid-template-rows` specify the sizing for these areas. A media query is included to transform the layout into a single-column stack on smaller screens, demonstrating responsiveness. The `min-height: 100vh` ensures the container always takes up at least the full viewport height.