CSS
Responsive Page Layout with CSS Grid Areas
Design complex, responsive page layouts using CSS Grid's `grid-template-areas` for clear structure, easily adapting to different screen sizes with media queries.
.grid-container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto auto 1fr auto;
grid-template-areas:
"header"
"nav"
"main"
"footer";
min-height: 100vh; /* Ensure footer is at bottom */
}
header { grid-area: header; background-color: lightblue; padding: 10px; }
nav { grid-area: nav; background-color: lightgreen; padding: 10px; }
main { grid-area: main; background-color: lightcoral; padding: 20px; }
footer { grid-area: footer; background-color: lightgray; padding: 10px; }
@media (min-width: 768px) {
.grid-container {
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"nav main"
"footer footer";
}
}
How it works: This snippet illustrates creating a responsive page layout using CSS Grid and `grid-template-areas`. It defines distinct areas (header, nav, main, footer) and places them on the grid for mobile-first layout. A media query then rearranges these areas for wider screens, moving the navigation to a sidebar alongside the main content, demonstrating powerful layout adaptation.