CSS Grid: Build a Responsive Full-Page Layout

<div class="grid-page-layout">
  <header>Header</header>
  <nav>Navigation</nav>
  <main>Main Content</main>
  <aside>Sidebar</aside>
  <footer>Footer</footer>
</div>

.grid-page-layout {
  display: grid;
  grid-template-columns: 1fr 4fr; /* Two columns: 1 part for nav/aside, 4 for main */
  grid-template-rows: auto 1fr auto; /* Rows: header (auto), main (1fr), footer (auto) */
  min-height: 100vh;
  gap: 15px; /* Spacing between grid items */
}

header {
  grid-column: 1 / -1; /* Header spans all columns */
  background-color: #f0f0f0;
  padding: 1rem;
}

nav {
  grid-column: 1 / 2; /* Nav in the first column */
  background-color: #e6e6e6;
  padding: 1rem;
}

main {
  grid-column: 2 / -1; /* Main content in the second column */
  background-color: #e0e0e0;
  padding: 1rem;
}

aside {
  grid-column: 1 / 2; /* Sidebar below nav, in the first column */
  background-color: #e6e6e6;
  padding: 1rem;
}

footer {
  grid-column: 1 / -1; /* Footer spans all columns */
  background-color: #f0f0f0;
  padding: 1rem;
}

/* Basic Responsive Adjustment */
@media (max-width: 768px) {
  .grid-page-layout {
    grid-template-columns: 1fr; /* Single column on smaller screens */
    grid-template-rows: auto auto 1fr auto auto; /* Re-order rows for mobile */
  }

  nav, main, aside, footer {
    grid-column: 1 / -1; /* All items span full width */
  }

  /* Re-order sidebar to appear below main content on mobile */
  aside {
    grid-row: 4; /* Place aside after main (which is row 3) */
  }
}