CSS
Design Complex Page Layouts with CSS Grid Areas
Master the art of structuring intricate web page designs using named CSS Grid Areas, providing semantic and maintainable control over element placement and responsiveness.
.page-layout {
display: grid;
grid-template-columns: 1fr 4fr 1fr; /* Sidebar | Content | Sidebar */
grid-template-rows: auto 1fr auto; /* Header | Main | Footer */
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
min-height: 100vh;
gap: 10px; /* Spacing between grid items */
}
.header { grid-area: header; background-color: #f8f8f8; padding: 10px; }
.nav { grid-area: nav; background-color: #e8e8e8; padding: 10px; }
.main { grid-area: main; background-color: #d8d8d8; padding: 10px; }
.aside { grid-area: aside; background-color: #e8e8e8; padding: 10px; }
.footer { grid-area: footer; background-color: #f8f8f8; padding: 10px; }
How it works: This snippet showcases the power of CSS Grid Areas for creating complex and readable page layouts. By defining named areas with `grid-template-areas`, elements can be semantically placed within the grid structure. The `grid-area` property then assigns specific elements to their respective spots. This approach makes it exceptionally easy to visualize, adjust, and maintain the entire layout, especially for responsive designs.