CSS
Full-Page Layout with CSS Grid Areas
Design a comprehensive web page layout (header, nav, main, sidebar, footer) using CSS Grid's named areas for intuitive, semantic, and maintainable structure.
body {
display: grid;
grid-template-areas:
"header header header"
"nav main sidebar"
"footer footer footer";
grid-template-columns: 200px 1fr 250px; /* Nav, Main, Sidebar widths */
grid-template-rows: auto 1fr auto; /* Header height, Main area grows, Footer height */
min-height: 100vh; /* Ensure the grid fills the viewport height */
margin: 0;
font-family: Arial, sans-serif;
}
header {
grid-area: header;
background-color: #f8f8f8;
padding: 20px;
text-align: center;
border-bottom: 1px solid #eee;
}
nav {
grid-area: nav;
background-color: #e9e9e9;
padding: 20px;
}
main {
grid-area: main;
background-color: #fff;
padding: 20px;
}
aside { /* Using aside for sidebar */
grid-area: sidebar;
background-color: #f2f2f2;
padding: 20px;
}
footer {
grid-area: footer;
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}
@media (max-width: 768px) {
body {
grid-template-areas:
"header"
"nav"
"main"
"sidebar"
"footer";
grid-template-columns: 1fr; /* Single column */
grid-template-rows: auto auto 1fr auto auto; /* Stacked content */
}
}
How it works: This CSS Grid snippet creates a complete page layout using `grid-template-areas`. Each area (header, nav, main, sidebar, footer) is named and positioned within a visual grid, making the layout highly readable and maintainable. `grid-template-columns` and `grid-template-rows` define the sizes of the tracks. The `min-height: 100vh` ensures the layout spans the full viewport height. A media query is included to reflow the layout into a single column for smaller screens.