body {
      font-family: Arial, sans-serif;
      margin: 0;
    }
    nav {
      background: #333;
      padding: 10px;
      text-align: center;
    }
    nav a {
      color: white;
      margin: 0 15px;
      text-decoration: none;
      font-weight: bold;
    }
    nav a:hover {
      text-decoration: underline;
    }
    .layout {
      width: 400px;
      height: 400px;
      border: 2px solid #333;
      display: grid;
      gap: 5px;
      padding: 5px;
      background: #f9f9f9;
      margin: 20px auto;
    }
    .box {
      background-color: #ddd;
      border: 1px solid #555;
    }
    /* Layout 2 Grid */
    .layout2 {
      grid-template-rows: 60px auto 60px;
      grid-template-columns: 1fr 1fr 100px;
      grid-template-areas:
        "header header header"
        "left right sidebar"
        "footer footer footer";
    }
    .layout2 .header { grid-area: header; }
    .layout2 .left { grid-area: left; }
    .layout2 .right { grid-area: right; }
    .layout2 .sidebar { grid-area: sidebar; }

    .layout2 .footer { grid-area: footer; }