CSS
CSS Grid: Named Area Full Page Layout
Design a complete responsive page structure with distinct header, sidebar, main content, and footer sections using CSS Grid's semantic `grid-template-areas` for clarity and maintainability.
.page-layout {
display: grid;
grid-template-columns: 200px 1fr; /* Sidebar width and main content */
grid-template-rows: auto 1fr auto; /* Header height, main/sidebar height, footer height */
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
min-height: 100vh;
gap: 10px;
}
@media (max-width: 768px) {
.page-layout {
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto auto; /* Header, main, sidebar, footer */
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
}
}
.header { grid-area: header; background-color: #e0f2f7; padding: 1em; text-align: center; }
.sidebar { grid-area: sidebar; background-color: #f1f8e9; padding: 1em; }
.main { grid-area: main; background-color: #fff3e0; padding: 1em; }
.footer { grid-area: footer; background-color: #e0f2f7; padding: 1em; text-align: center; }
How it works: This snippet demonstrates a robust full-page layout using CSS Grid's `grid-template-areas` property. It defines a semantic structure (header, sidebar, main, footer) for the grid and maps HTML elements to these named areas. A media query is included to show how easily the entire layout can be reconfigured for smaller screens by simply redefining `grid-template-areas` and adjusting `grid-template-columns`/`grid-template-rows`.