SOURCE

<div class="container container--1">
  <div class="header" style="background-color: #ACF4B6;">HEADER</div>
  <div class="menu" style="background-color: #FFE975;">MENU</div>
  <div class="content" style="background-color: #5DFFFA;">CONTENT</div>
  <div class="footer" style="background-color: #E6B4FD;">FOOTER</div>
</div>

<div class="container container--2">
  <div class="header" style="background-color: #ACF4B6;">HEADER</div>
  <div class="menu" style="background-color: #FFE975;">MENU</div>
  <div class="content" style="background-color: #5DFFFA;">CONTENT</div>
  <div class="footer" style="background-color: #E6B4FD;">FOOTER</div>
</div>

.container {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 50px 350px 50px;
  grid-gap: 5px;
}

.container--1 {
    grid-template-areas: 
    "m m h h h h h h h h h h"
    "m m c c c c c c c c c c"
    "m m f f f f f f f f f f";
}
.container--2 {
    grid-template-areas: 
    "h h h h h h h h h h h h"
    "m m c c c c c c c c c c"
    "f f f f f f f f f f f f";
}

.header {
  grid-area: h;
}

.menu {
  grid-area: m;
}

.content {
  grid-area: c;
}

.footer {
  grid-area: f;
}