CSS
Designing Layouts with `grid-template-areas`
Structure complex web page layouts semantically using CSS Grid's `grid-template-areas` property, providing a highly readable and maintainable way to position elements.
.page-layout {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
height: 100vh; /* For full page layout example */
gap: 15px;
padding: 15px;
border: 2px solid #a6a6a6;
}
.header { grid-area: header; background-color: #e0f2f7; padding: 10px; text-align: center; }
.nav { grid-area: nav; background-color: #e6ffe6; padding: 10px; }
.main { grid-area: main; background-color: #fff2e6; padding: 10px; }
.aside { grid-area: aside; background-color: #ffe6e6; padding: 10px; }
.footer { grid-area: footer; background-color: #f7e0f2; padding: 10px; text-align: center; }
How it works: This snippet demonstrates how to create descriptive and maintainable grid layouts using `grid-template-areas`. You define named areas within `grid-template-areas` in a visual ASCII-art-like structure, mapping them directly to elements using the `grid-area` property. This approach makes understanding and modifying the page's overall layout incredibly intuitive, especially for complex designs with multiple regions.