CSS
Structure Complex Section Layouts with CSS Grid Template Areas
Master `grid-template-areas` to define intuitive named regions for a section's layout, simplifying placement and improving readability for complex UI components beyond full-page structures.
.section-layout {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* Three columns */
grid-template-rows: auto 1fr auto; /* Header, content, footer-like rows */
gap: 1rem;
grid-template-areas:
"header header header"
"nav content ads"
"footer footer footer";
height: 400px; /* Example height for visualization */
border: 1px solid #ccc;
padding: 1rem;
}
.section-header { grid-area: header; background-color: #e0e0e0; padding: 0.5rem; }
.section-nav { grid-area: nav; background-color: #f0f0f0; padding: 0.5rem; }
.section-content { grid-area: content; background-color: #ffffff; padding: 0.5rem; }
.section-ads { grid-area: ads; background-color: #f0f0f0; padding: 0.5rem; }
.section-footer { grid-area: footer; background-color: #e0e0e0; padding: 0.5rem; }
How it works: This snippet demonstrates how to use `grid-template-areas` to create highly readable and maintainable layouts for specific sections or components. By defining a visual ASCII-art-like representation of the layout within `grid-template-areas`, and then assigning `grid-area` names to child elements, you can easily place items without worrying about exact column/row numbers. This approach is excellent for complex component layouts, not just full-page structures, enhancing clarity and simplifying adjustments.