<div class="container">
    <header class="header">Header</header>
    <nav class="nav">Navigation</nav>
    <aside class="aside">Aside</aside>
    <main class="main">
      <section class="content">
        <article class="article">Article</article>
        <div class="nested-grid">
          <div class="nested-item">Nested 1</div>
          <div class="nested-item">Nested 2</div>
          <div class="nested-item">Nested 3</div>
          <div class="nested-item">Nested 4</div>
        </div>
      </section>
      <footer class="footer">Footer</footer>
    </main>
  </div>

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav main aside"
    "footer footer footer";
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr 3fr 1fr;
  gap: 10px;
  width: 90%;
  max-width: 1200px;
  height: 90vh;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.header {
  grid-area: header;
  background-color: #4CAF50;
  padding: 10px;
  text-align: center;
  color: white;
}

.nav {
  grid-area: nav;
  background-color: #2196F3;
  padding: 10px;
  color: white;
}

.aside {
  grid-area: aside;
  background-color: #FF5722;
  padding: 10px;
  color: white;
}

.main {
  grid-area: main;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 10px;
}

.content {
  background-color: #F0F0F0;
  padding: 10px;
}

.article {
  background-color: #FFC107;
  padding: 10px;
  margin-bottom: 10px;
}

.nested-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.nested-item {
  background-color: #8BC34A;
  padding: 10px;
  text-align: center;
}

.footer {
  grid-area: footer;
  background-color: #795548;
  padding: 10px;
  text-align: center;
  color: white;
}

/* Responsive Design */
@media (max-width: 768px) {
  .container {
    grid-template-areas:
      "header"
      "nav"
      "main"
      "aside"
      "footer";
    grid-template-rows: auto auto 1fr auto auto;
    grid-template-columns: 1fr;
  }

  .main {
    grid-template-rows: auto 1fr;
  }

  .nested-grid {
    grid-template-columns: 1fr;
  }
}