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;
    }
    .layout3 {
      grid-template-rows: 60px 30px auto 60px;
      grid-template-columns: 60px auto 60px;
      grid-template-areas:
        "circle1 header header"
        "nav nav nav"
        "left main main"
        "footer footer circle2";
    }
    .layout3 .circle1 {
      grid-area: circle1;
      border-radius: 50%;
      background: #bbb;
    }
    .layout3 .header { grid-area: header; }
    .layout3 .nav { grid-area: nav; }
    .layout3 .left { grid-area: left; }
    .layout3 .main { grid-area: main; }
    .layout3 .footer { grid-area: footer; }
    .layout3 .circle2 {
      grid-area: circle2;
      border-radius: 50%;
      background: #bbb;
    }