CSS
Design a Flexible Page Layout with CSS Grid Areas
Learn to build complex, semantic page layouts using CSS Grid `grid-template-areas`, making it easy to position elements like headers, sidebars, and main content with clear structural definitions.
.page-layout {
display: grid;
grid-template-columns: 1fr 3fr; /* Sidebar (1fr) and Main (3fr) */
grid-template-rows: auto 1fr auto; /* Header, Main/Sidebar, Footer */
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
min-height: 100vh;
gap: 15px; /* Space between grid items */
}
.header { grid-area: header; background-color: #a7d9f2; padding: 20px; text-align: center; }
.sidebar { grid-area: sidebar; background-color: #f0f0f0; padding: 20px; }
.main { grid-area: main; background-color: #e6ffe6; padding: 20px; }
.footer { grid-area: footer; background-color: #a7d9f2; padding: 20px; text-align: center; }
How it works: This snippet demonstrates how to create a structured page layout using CSS Grid's `grid-template-areas`. It defines a layout with a full-width header and footer, and a two-column main section (sidebar and main content). By assigning `grid-area` names to elements, their placement becomes intuitive and highly readable within the `grid-template-areas` declaration, facilitating maintenance and understanding of complex layouts. `min-height: 100vh` ensures the layout covers the full viewport height.