CSS
Structure Layouts with Named Grid Areas in CSS Grid
Organize complex page layouts more semantically and responsively by defining and placing elements using named `grid-template-areas` in CSS Grid, enhancing readability and maintenance.
.page-layout {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto 1fr auto;
gap: 15px;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
min-height: 100vh; /* Example: full height layout */
padding: 10px;
background-color: #f0f0f0;
}
.header { grid-area: header; background-color: lightblue; padding: 20px; text-align: center; }
.nav { grid-area: nav; background-color: lightgreen; padding: 20px; text-align: center; }
.main { grid-area: main; background-color: lightcoral; padding: 20px; text-align: center; }
.aside { grid-area: aside; background-color: lightyellow; padding: 20px; text-align: center; }
.footer { grid-area: footer; background-color: lightgray; padding: 20px; text-align: center; }
How it works: This snippet demonstrates how to use `grid-template-areas` to create a named layout structure. The `grid-template-areas` property visually defines the layout by mapping custom names to grid cells. Each grid item then uses `grid-area` to specify which named area it should occupy, making complex layouts easier to read, understand, and modify, especially when adapting for responsiveness with media queries.