<div class="container">
    <div class="header">header</div>
    <div class="grid">
      <div class="place">1</div>
      <div class="place">2</div>
      <div class="place">3</div>
      <div class="place">4</div>
      <div class="place">5</div>
      <div class="place">6</div>
      <div class="place">7</div>
      <div class="place">8</div>
      <div class="place">9</div>
      <div class="place">10</div>
      <div class="place">11</div>
      <div class="place">12</div>
      <div class="place">13</div>
      <div class="place">14</div>
      <div class="place">15</div>
      <div class="place">16</div>
    </div>
    <div class="footer">footer</div>
  </div>

* {
  font-family: sans-serif;
  padding: 0;
  margin: 0;
}

.container {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-rows: 1fr 5fr 1fr;
  grid-template-columns: 2fr 5fr 2fr;
  grid-template-areas:
    "header header header"
    ". grid ."
    "footer footer footer";

  .header {
    grid-area: header;
    background: #0D0;
  }
  .footer {
    grid-area: footer;
    background: #D00;
  }
  .grid {
    display: grid;
    grid-template: repeat(4, 1fr) / repeat(4, 1fr);
    grid-area: grid;
    grid-gap: .2em;
    .place {
      background: #DDD;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}