CSS
Complex Layout with CSS Grid Areas
Structure a web page into a multi-section layout (header, sidebar, content, footer) using CSS Grid Areas for clear and maintainable design.
.grid-layout {
display: grid;
grid-template-columns: 200px 1fr; /* Sidebar width, Content takes remaining */
grid-template-rows: auto 1fr auto; /* Header height, Content height, Footer height */
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
min-height: 100vh; /* Example: Full viewport height */
gap: 10px;
}
.header { grid-area: header; background-color: #a7d9f7; padding: 1rem; text-align: center; }
.sidebar { grid-area: sidebar; background-color: #d1efff; padding: 1rem; }
.content { grid-area: content; background-color: #e8f7ff; padding: 1rem; }
.footer { grid-area: footer; background-color: #a7d9f7; padding: 1rem; text-align: center; }
How it works: This snippet demonstrates a powerful way to define complex page layouts using CSS Grid Areas. `display: grid` initiates the grid. `grid-template-columns` and `grid-template-rows` define the track sizes. `grid-template-areas` then visually maps named areas to the grid cells, making the layout structure highly readable and easy to modify. Each child element is assigned to an area using `grid-area`, placing it precisely within the defined layout.