CSS
Complex Page Layout with CSS Grid Named Areas and Item Spanning
Design sophisticated page layouts using CSS Grid's named areas, combining them with explicit row/column spans for highly flexible and maintainable structural designs.
/* HTML */
<div class="grid-container">
<header class="grid-header">Header</header>
<nav class="grid-nav">Navigation</nav>
<main class="grid-main">Main Content</main>
<aside class="grid-sidebar">Sidebar</aside>
<footer class="grid-footer">Footer</footer>
</div>
/* CSS */
.grid-container {
display: grid;
grid-template-columns: 1fr 3fr 1fr; /* Defines three columns with flexible widths */
grid-template-rows: auto 1fr auto; /* Defines header, main content (flexible), and footer rows */
grid-template-areas:
"header header header"
"nav main sidebar"
"footer footer footer";
gap: 15px;
min-height: 100vh;
font-family: sans-serif;
border: 2px solid #333;
}
.grid-header { grid-area: header; background: #6495ed; padding: 10px; }
.grid-nav { grid-area: nav; background: #add8e6; padding: 10px; }
.grid-main { grid-area: main; background: #f0f8ff; padding: 10px; }
.grid-sidebar { grid-area: sidebar; background: #add8e6; padding: 10px; }
.grid-footer { grid-area: footer; background: #6495ed; padding: 10px; }
How it works: This snippet illustrates how to construct a complex page layout using CSS Grid's `grid-template-areas` property. By defining a visual structure with named areas, you can intuitively place elements like header, navigation, main content, sidebar, and footer. The `grid-template-areas` property also implicitly defines how these areas span across the defined columns and rows (e.g., 'header header header' makes the header span all three columns). Each area is then assigned to a corresponding HTML element using `grid-area`, which enhances readability and simplifies responsive adjustments, as the layout can be redefined for different screen sizes by simply changing the `grid-template-areas` value in media queries.