CSS
Design Full-Page Layouts Using CSS Grid Areas
Structure complex web page layouts with distinct regions like header, sidebar, main content, and footer using intuitive CSS Grid Areas for better readability, maintainability, and responsiveness.
.page-layout {
display: grid;
grid-template-columns: 1fr 4fr 1fr; /* Defines 3 columns: nav, main, aside */
grid-template-rows: auto 1fr auto; /* Defines 3 rows: header, content, footer */
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
min-height: 100vh;
gap: 15px; /* Spacing between grid areas */
font-family: sans-serif;
}
header { grid-area: header; background-color: #333; color: white; padding: 20px; text-align: center; }
nav { grid-area: nav; background-color: #f8f8f8; padding: 20px; }
main { grid-area: main; background-color: #fff; padding: 20px; }
aside { grid-area: aside; background-color: #f8f8f8; padding: 20px; }
footer { grid-area: footer; background-color: #333; color: white; padding: 20px; text-align: center; }
/* HTML Structure:
<div class="page-layout">
<header>Header</header>
<nav>Navigation</nav>
<main>Main Content</main>
<aside>Aside Content</aside>
<footer>Footer</footer>
</div>
*/
How it works: This snippet demonstrates how to build a robust full-page layout using CSS Grid's `grid-template-areas` property. First, `display: grid` enables the grid. `grid-template-columns` and `grid-template-rows` define the structure of the grid. Then, `grid-template-areas` provides a visual ASCII-art like representation to name and place your layout sections. Finally, each child element is assigned its corresponding grid area using the `grid-area` property, making the layout highly readable and easy to modify.