CSS
Semantic Grid Layout with `grid-template-areas`
Define a clear, readable grid layout using `grid-template-areas` to assign names to regions, enhancing maintainability and semantic structure in your CSS.
.page-layout {
display: grid;
grid-template-columns: 1fr 3fr 1fr; /* Sidebar | Main | Aside */
grid-template-rows: auto 1fr auto; /* Header | Content | Footer */
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
min-height: 100vh; /* Ensure full viewport height */
}
.header {
grid-area: header;
background-color: #f0f0f0;
padding: 20px;
}
.main-content {
grid-area: main;
background-color: #fff;
padding: 20px;
}
.sidebar-nav {
grid-area: nav;
background-color: #e0e0e0;
padding: 20px;
}
.right-aside {
grid-area: aside;
background-color: #d0d0d0;
padding: 20px;
}
.footer {
grid-area: footer;
background-color: #f0f0f0;
padding: 20px;
}
/* Basic responsiveness for smaller screens */
@media (max-width: 768px) {
.page-layout {
grid-template-columns: 1fr; /* Single column layout */
grid-template-rows: auto auto 1fr auto auto; /* Header, Nav, Main, Aside, Footer */
grid-template-areas:
"header"
"nav"
"main"
"aside"
"footer";
}
}
How it works: This snippet demonstrates `grid-template-areas` to create a named, semantic grid layout. `grid-template-columns` and `grid-template-rows` define the grid tracks, while `grid-template-areas` assigns names to specific regions. Child elements then use `grid-area` to place themselves into these named regions, making the layout highly readable and easy to maintain. A media query is included for basic responsiveness.