CSS
Two-Column Layout with Grid Areas
Design a flexible two-column layout, such as a main content area with a sidebar, using CSS Grid `grid-template-areas` for semantic and easy-to-understand structure.
.page-layout {
display: grid;
grid-template-columns: 1fr 3fr; /* Sidebar 1 part, Content 3 parts */
grid-template-rows: auto 1fr auto; /* Header, Content/Sidebar, Footer */
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
min-height: 100vh;
gap: 10px; /* Space between grid areas */
}
header { grid-area: header; background-color: #a7d9b5; padding: 20px; }
aside { grid-area: sidebar; background-color: #f7e0e0; padding: 20px; }
main { grid-area: main; background-color: #e0f2f7; padding: 20px; }
footer { grid-area: footer; background-color: #a3a3a3; padding: 15px; }
How it works: This snippet demonstrates a robust two-column layout using CSS Grid's `grid-template-areas`. It defines named areas (`header`, `sidebar`, `main`, `footer`) within the `page-layout` container. Each element then assigns itself to a `grid-area`. This approach provides a highly readable and maintainable way to structure complex page layouts, making it easy to rearrange elements simply by changing the `grid-template-areas` definition for different screen sizes.