CSS
Complex Page Layout with CSS Grid Areas
Design sophisticated and responsive page layouts using CSS Grid `grid-template-areas` for intuitive placement of header, sidebar, main content, and footer sections.
.grid-layout {
display: grid;
grid-template-columns: 1fr 4fr; /* Sidebar width and main content width */
grid-template-rows: auto 1fr auto; /* Header height, content height, footer height */
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
min-height: 100vh;
}
header { grid-area: header; background-color: #f8f8f8; padding: 20px; }
aside { grid-area: sidebar; background-color: #eee; padding: 20px; }
main { grid-area: main; background-color: #fff; padding: 20px; }
footer { grid-area: footer; background-color: #333; color: white; padding: 20px; text-align: center; }
@media (max-width: 768px) {
.grid-layout {
grid-template-columns: 1fr; /* Stack columns on small screens */
grid-template-rows: auto auto 1fr auto; /* Header, Sidebar, Main, Footer */
grid-template-areas:
"header"
"sidebar"
"main"
"footer";
}
}
How it works: This snippet leverages CSS Grid Areas to define a complex and visually intuitive page layout, including a header, sidebar, main content, and footer. `grid-template-areas` provides a clear visual structure for element placement. A media query is included to demonstrate how to easily rearrange the layout for smaller screens, transforming the two-column structure into a stacked vertical arrangement for improved responsiveness.