CSS
Declarative Asymmetrical Layouts with Grid Areas
Design complex, non-uniform grid layouts easily by defining named template areas, offering a highly visual and maintainable approach to structuring web pages.
/* HTML Structure */
<div class="page-layout">
<header class="grid-header">Site Header</header>
<nav class="grid-nav">Navigation</nav>
<aside class="grid-sidebar">Sidebar Content</aside>
<main class="grid-main">Main Content Area</main>
<footer class="grid-footer">Site Footer</footer>
</div>
/* CSS */
.page-layout {
display: grid;
/* Define columns: sidebar fixed 200px, main content flexible */
grid-template-columns: 200px 1fr;
/* Define rows: header fixed, main/sidebar flexible, footer fixed */
grid-template-rows: auto 1fr auto;
/*
* Define grid areas visually. Each string represents a row.
* 'header header' means header spans both columns in the first row.
* 'nav main' means nav is in the first column, main in the second.
*/
grid-template-areas:
"header header"
"nav main"
"sidebar main"
"footer footer";
min-height: 100vh;
gap: 10px;
background-color: #f9f9f9;
padding: 10px;
}
/* Assign grid areas to elements */
.grid-header { grid-area: header; background-color: #add8e6; padding: 15px; }
.grid-nav { grid-area: nav; background-color: #90ee90; padding: 15px; }
.grid-sidebar { grid-area: sidebar; background-color: #ffb6c1; padding: 15px; }
.grid-main { grid-area: main; background-color: #e0ffff; padding: 15px; }
.grid-footer { grid-area: footer; background-color: #add8e6; padding: 15px; }
/* Optional styling */
.page-layout > * {
border-radius: 5px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
How it works: This snippet demonstrates `grid-template-areas`, a powerful CSS Grid feature for creating complex, asymmetrical layouts in a highly readable and maintainable way. Instead of relying on numerical `grid-column` and `grid-row` placements, you define a visual 'ASCII art' representation of your layout using named areas in `grid-template-areas`. Then, each child element is assigned to an area using the `grid-area` property. This approach makes it easy to understand the layout structure at a glance and simplifies responsive adjustments by simply redefining the areas within media queries.