CSS
Adaptive Grid Layouts with `grid-template-areas` and Media Queries
Create highly adaptable and responsive page designs using `grid-template-areas`. Define semantic layout regions and effortlessly rearrange them with media queries for optimal viewing across devices.
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
gap: 15px;
min-height: 100vh;
border: 1px solid #ccc;
padding: 10px;
}
.header { grid-area: header; background-color: #fca311; padding: 20px; text-align: center; }
.nav { grid-area: nav; background-color: #e0e0e0; padding: 20px; }
.main { grid-area: main; background-color: #ffffff; padding: 20px; }
.aside { grid-area: aside; background-color: #e0e0e0; padding: 20px; }
.footer { grid-area: footer; background-color: #343a40; color: white; padding: 20px; text-align: center; }
@media (max-width: 768px) {
.grid-container {
grid-template-columns: 1fr; /* Single column layout */
grid-template-rows: auto auto 1fr auto auto; /* Adjust rows */
grid-template-areas:
"header"
"nav"
"main"
"aside"
"footer";
}
}
How it works: The `grid-template-areas` property allows developers to name regions within their grid, creating a highly readable and maintainable layout structure. By combining this with media queries, entire page layouts can be dynamically reconfigured for different screen sizes, making responsive design simpler and more semantic than traditional float-based or complex flexbox approaches for full page layouts.