CSS
Advanced Full Page Layout with CSS Grid Areas
Design a robust and semantic full-page layout (header, navigation, main content, sidebar, footer) using CSS Grid's named template areas for clarity and responsiveness.
.grid-container {
display: grid;
grid-template-columns: 1fr 3fr 1fr; /* Example: Nav, Main, Sidebar */
grid-template-rows: auto 1fr auto; /* Header, Content, Footer */
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
min-height: 100vh; /* Takes full viewport height */
gap: 10px;
}
.header { grid-area: header; background-color: #a0c4ff; }
.nav { grid-area: nav; background-color: #bdb2ff; }
.main { grid-area: main; background-color: #ffc6ff; }
.aside { grid-area: aside; background-color: #ffadad; }
.footer { grid-area: footer; background-color: #ffd6a5; }
/* Basic responsiveness: stack on small screens */
@media (max-width: 768px) {
.grid-container {
grid-template-columns: 1fr;
grid-template-rows: auto auto 1fr auto auto; /* Header, Nav, Main, Aside, Footer */
grid-template-areas:
"header"
"nav"
"main"
"aside"
"footer";
}
}
How it works: This snippet demonstrates how to structure an entire web page layout using CSS Grid and `grid-template-areas`. Named areas (`header`, `nav`, `main`, `aside`, `footer`) make the layout structure highly readable and easy to modify. The `@media` query shows a basic way to make the layout responsive, stacking the sections vertically on smaller screens, showcasing Grid's power for adaptive design.