CSS grid-area Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">.grid {
  display: grid;
  grid-template-columns: 200px 1fr 250px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    'header header header'
    'nav main sidebar'
    'footer footer footer';
  gap: 16px;
  height: 100vh;
  padding: 16px;
  box-sizing: border-box;
  background: #f4f6f8;
}

.header {
  grid-area: header;
  background: #2b7a78;
  color: #ffffff;
  padding: 16px;
  border-radius: 8px;
}

.nav {
  grid-area: nav;
  background: #17252a;
  color: #ffffff;
  padding: 16px;
  border-radius: 8px;
}

.main {
  grid-area: main;
  background: #def2f1;
  padding: 16px;
  border-radius: 8px;
}

.sidebar {
  grid-area: sidebar;
  background: #3aa17e;
  color: #ffffff;
  padding: 16px;
  border-radius: 8px;
}

.footer {
  grid-area: footer;
  background: #17252a;
  color: #ffffff;
  padding: 12px;
  border-radius: 8px;
  text-align: center;
}

/* Responsive: collapse to single column on small screens */
@media (max-width: 700px) {
  .grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      'header'
      'nav'
      'main'
      'sidebar'
      'footer';
  }
}
</style></head><body><div class='grid'>
  Header
  <nav class='nav'>
    <ul class='menu'>
      <li>Home</li>
      <li>About</li>
      <li>Contact</li>
    </ul>
  </nav>
  <main class='main'>
    <h1>Main Content</h1>
    <p>This area uses the grid-area named 'main'.</p>
  </main>
  <aside class='sidebar'>
    <h2>Sidebar</h2>
    <p>Extra info here.</p>
  </aside>
  <footer class='footer'>Footer © 2026</footer>
</div></body></html>