CSS
CSS Grid: Full Page Layout with Named Areas (Holy Grail)
Design a robust, semantic full-page layout using CSS Grid's named `grid-template-areas` for header, navigation, main content, sidebar, and footer.
html, body {
height: 100%;
margin: 0;
font-family: sans-serif;
}
.grid-layout-container {
display: grid;
min-height: 100vh;
grid-template-areas:
"header header header"
"nav main sidebar"
"footer footer footer";
grid-template-rows: auto 1fr auto; /* Header & Footer height auto, main content fills space */
grid-template-columns: 200px 1fr 250px; /* Nav & Sidebar fixed width, main content fills */
gap: 10px;
background-color: #f5f5f5;
}
.header { grid-area: header; background-color: #007bff; color: white; padding: 15px; text-align: center; }
.nav { grid-area: nav; background-color: #6c757d; color: white; padding: 15px; }
.main-area { grid-area: main; background-color: #e9ecef; padding: 20px; }
.sidebar { grid-area: sidebar; background-color: #adb5bd; padding: 15px; }
.footer { grid-area: footer; background-color: #343a40; color: white; padding: 15px; text-align: center; }
How it works: This snippet demonstrates how to create a classic 'Holy Grail' layout using CSS Grid's powerful `grid-template-areas`. You define a visual structure using named areas within `grid-template-areas`, and then assign each child element to its respective area using the `grid-area` property. `grid-template-rows` and `grid-template-columns` define the sizes of rows and columns. This approach offers a highly readable and maintainable way to manage complex page layouts, making responsive adjustments simpler with media queries.