CSS
Structuring Complex Page Layouts with CSS Grid `grid-template-areas`
Master semantic page layouts using CSS Grid's `grid-template-areas` property, enabling easy reordering and clear structure for complex and responsive designs.
.page-layout {
display: grid;
grid-template-columns: 1fr 3fr 1fr; /* Three columns: sidebar, content, ads */
grid-template-rows: auto 1fr auto; /* Three rows: header, main, footer */
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
min-height: 100vh; /* Ensure it takes full viewport height */
gap: 10px;
background-color: #eee;
}
.header { grid-area: header; background-color: #f0f0f0; padding: 20px; }
.nav { grid-area: nav; background-color: #e0e0e0; padding: 20px; }
.main-content { grid-area: main; background-color: #ffffff; padding: 20px; }
.aside { grid-area: aside; background-color: #e8e8e8; padding: 20px; }
.footer { grid-area: footer; background-color: #f0f0f0; padding: 20px; }
/* Example HTML structure */
/*
<div class="page-layout">
<header class="header">Header</header>
<nav class="nav">Navigation</nav>
<main class="main-content">Main Content</main>
<aside class="aside">Aside/Ads</aside>
<footer class="footer">Footer</footer>
</div>
*/
How it works: The `grid-template-areas` property allows you to define a grid's structure using named areas, making complex layouts highly readable and easier to manage. You assign a name to each area, then use the `grid-area` property on individual grid items to place them into the defined areas. This method simplifies responsive adjustments, as you can redefine the `grid-template-areas` within media queries to completely rearrange the layout with minimal code.