CSS
Define Complex Grid Layouts with grid-template-areas
Simplify the definition of intricate CSS Grid layouts using `grid-template-areas`, allowing for highly readable and maintainable structure with named sections.
.page-layout {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* Left, Main, Right columns */
grid-template-rows: auto 1fr auto; /* Header, Content, Footer rows */
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
min-height: 100vh;
gap: 15px;
padding: 15px;
}
header { grid-area: header; background-color: lightblue; padding: 10px; }
nav { grid-area: nav; background-color: lightgreen; padding: 10px; }
main { grid-area: main; background-color: lightcoral; padding: 10px; }
aside { grid-area: aside; background-color: lightgoldenrodyellow; padding: 10px; }
footer { grid-area: footer; background-color: lightgray; padding: 10px; }
How it works: This snippet demonstrates the power of `grid-template-areas` for defining complex grid layouts semantically. Instead of numeric line-based placement, you define named areas in a visual ASCII-art-like structure on the `grid` container. Each child element then simply assigns itself to an area using `grid-area`. This method greatly enhances readability and maintainability for multi-section page layouts, making it easy to understand the overall structure at a glance.