CSS Grid: Implementing the Holy Grail Layout with Named Areas

.holy-grail-layout {
  display: grid;
  /* Define grid areas for a desktop layout */
  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "footer footer footer";
  /* Define column widths: 200px for nav, 1fr for main, 150px for aside */
  grid-template-columns: 200px 1fr 150px;
  /* Define row heights: auto for header/footer, 1fr for main content */
  grid-template-rows: auto 1fr auto;
  min-height: 100vh; /* Ensure layout takes full viewport height */
  gap: 10px; /* Spacing between grid areas */
}

/* Assign grid items to named areas */
.hg-header {
  grid-area: header;
  background-color: #6a1b9a;
  color: white;
  padding: 20px;
  text-align: center;
}

.hg-nav {
  grid-area: nav;
  background-color: #9c27b0;
  color: white;
  padding: 15px;
}

.hg-main {
  grid-area: main;
  background-color: #e1bee7;
  padding: 20px;
}

.hg-aside {
  grid-area: aside;
  background-color: #ce93d8;
  padding: 15px;
}

.hg-footer {
  grid-area: footer;
  background-color: #6a1b9a;
  color: white;
  padding: 15px;
  text-align: center;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
  .holy-grail-layout {
    /* Reconfigure areas for a stacked layout */
    grid-template-areas:
      "header"
      "nav"
      "main"
      "aside"
      "footer";
    /* One column taking full width */
    grid-template-columns: 1fr;
    /* Rows adapt their height */
    grid-template-rows: auto auto 1fr auto auto;
  }
}

/* HTML Structure */
/*
<div class="holy-grail-layout">
  <header class="hg-header">Header</header>
  <nav class="hg-nav">Navigation</nav>
  <main class="hg-main">Main Content Area</main>
  <aside class="hg-aside">Sidebar</aside>
  <footer class="hg-footer">Footer</footer>
</div>
*/