CSS
Build a Complex Layout with Grid Template Areas
Design a multi-section page layout including header, sidebar, main content, and footer using CSS Grid's highly readable `grid-template-areas` property.
.grid-layout {
display: grid;
grid-template-columns: 200px 1fr; /* Sidebar width, then main content */
grid-template-rows: auto 1fr auto; /* Header, main/sidebar, footer heights */
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
min-height: 100vh; /* Ensure full height */
gap: 10px; /* Space between grid sections */
}
.header {
grid-area: header;
background-color: #4CAF50;
color: white;
padding: 15px;
text-align: center;
}
.sidebar {
grid-area: sidebar;
background-color: #f1f1f1;
padding: 15px;
}
.main-content {
grid-area: main;
background-color: #fff;
padding: 15px;
}
.footer {
grid-area: footer;
background-color: #ddd;
padding: 15px;
text-align: center;
}
How it works: This snippet showcases how to create a complex page layout using CSS Grid's `grid-template-areas`. You first define the overall grid structure with `grid-template-columns` and `grid-template-rows`. Then, `grid-template-areas` provides a visual map of how named areas (like 'header', 'sidebar', 'main', 'footer') are arranged within the grid. Finally, you assign each grid item to its respective area using `grid-area`. This method greatly enhances the readability and maintainability of complex layouts.