CSS
Advanced CSS Grid Layout with Named Areas
Design sophisticated and readable page layouts using CSS Grid's named areas feature, defining distinct regions for header, sidebar, main content, and footer for clarity.
.page-layout {
display: grid;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
grid-template-columns: 150px 1fr 200px; /* Nav (fixed), Main (flex), Aside (fixed) */
grid-template-rows: auto 1fr auto; /* Header (auto), Main (flex), Footer (auto) */
min-height: 100vh;
gap: 10px;
padding: 10px;
background-color: #f0f0f0;
}
.header {
grid-area: header;
background-color: #ffcc80;
padding: 15px;
text-align: center;
}
.nav {
grid-area: nav;
background-color: #a7d9ed;
padding: 15px;
}
.main-content {
grid-area: main;
background-color: #e0f2f7;
padding: 15px;
}
.aside {
grid-area: aside;
background-color: #c8e6c9;
padding: 15px;
}
.footer {
grid-area: footer;
background-color: #ffcc80;
padding: 15px;
text-align: center;
}
How it works: This snippet showcases CSS Grid's powerful named areas for creating complex, readable page layouts. `grid-template-areas` defines a visual structure, mapping specific names to grid cells. `grid-template-columns` and `grid-template-rows` then specify the sizes for these areas. Child elements are placed easily using `grid-area: [name]`, making the layout highly maintainable and understandable, especially for intricate designs.