CSS
Design Complex Full-Page Layouts with CSS Grid Template Areas
Build intricate and responsive page layouts like headers, sidebars, main content, and footers using the powerful `grid-template-areas` feature of CSS Grid.
.grid-container {
display: grid;
grid-template-columns: 1fr 3fr; /* Example: 1 part sidebar, 3 parts main */
grid-template-rows: auto 1fr auto; /* Header auto, main fills, footer auto */
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
min-height: 100vh; /* Ensure container fills viewport height */
}
.header { grid-area: header; background: lightblue; padding: 1em; }
.sidebar { grid-area: sidebar; background: lightcoral; padding: 1em; }
.main { grid-area: main; background: lightgreen; padding: 1em; }
.footer { grid-area: footer; background: lightgray; padding: 1em; }
/* Basic responsiveness for smaller screens */
@media (max-width: 768px) {
.grid-container {
grid-template-columns: 1fr; /* Single column */
grid-template-areas:
"header"
"sidebar"
"main"
"footer";
}
}
How it works: This snippet demonstrates how to create a semantic, complex page layout using CSS Grid's `grid-template-areas`. The parent `.grid-container` defines named areas (`header`, `sidebar`, `main`, `footer`) and their arrangement across columns and rows. Child elements are then assigned to these areas using the `grid-area` property, making the layout structure highly readable and easily adaptable for different screen sizes with media queries.