Final Challenge

Let's design a typical Dashboard using named areas and adaptability.

.dashboard {
  display: grid;
  height: 100vh;
  grid-template-columns: 240px 1fr 300px;
  grid-template-rows: 60px 1fr;
  grid-template-areas: 
    "sidebar header header"
    "sidebar main   aside";
}

@media (max-width: 1024px) {
  .dashboard {
    grid-template-columns: 80px 1fr;
    grid-template-areas: 
      "sidebar header"
      "sidebar main";
    /* Aside (right panel) can be hidden or moved down */
  }
}

What's the Power of This Approach?

1. Readability: You immediately see that Sidebar occupies full height on the left.
2. Easy adaptation: In media query, you only need to change ONE line (grid-template-areas) to completely rebuild the interface.