CSS
Design Semantic Web Layouts Using CSS Grid Template Areas
Structure your web pages with clear, readable code by leveraging CSS Grid's powerful `grid-template-areas` property for semantic placement of headers, sidebars, main content, and footers.
.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";
min-height: 100vh; /* Ensures layout fills viewport vertically */
}
header {
grid-area: header;
background-color: #e0f2f7;
padding: 20px;
}
nav {
grid-area: nav;
background-color: #c8e6c9;
padding: 20px;
}
main {
grid-area: main;
background-color: #fffde7;
padding: 20px;
}
aside {
grid-area: aside;
background-color: #ffd8a7;
padding: 20px;
}
footer {
grid-area: footer;
background-color: #bbdefb;
padding: 20px;
}
How it works: This snippet demonstrates `grid-template-areas` for creating semantic page layouts. The `page-layout` container defines a grid with three columns and three rows. The `grid-template-areas` property provides a visual ASCII-art-like representation of the layout, mapping named areas ('header', 'nav', 'main', 'aside', 'footer') to specific grid cells. Each child element then uses `grid-area` to assign itself to a named area, making the layout's structure incredibly readable and easy to understand at a glance.