<div class="grid">
<div class="griditem1">1</div>
<div class="griditem2">2</div>
<div class="griditem3">3</div>
<div class="griditem4">4</div>
<div class="griditem5">5</div>
<div class="griditem6">5</div>

</div>

[class^="griditem"] {
   color: white;
  text-align: center;
  font-size: 3rem;
  background-color: blue;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 100px);
  grid-template-areas: "header header header header"
                       "main main sidebar sidebar"
                        "main main sidebar sidebar"
                       "footer footer footer footer";
  grid-auto-flow: dense;
  grid-gap: 10px;
}

.griditem1 {
  grid-area: header;
}

.griditem2 {
  grid-area: main;
}

.griditem3 {
  grid-area: sidebar;
}

.griditem4 {
  grid-column-start: main-start;
  grid-column-end: sidebar-end;
  background-color: rgba(250, 0, 0, .5);
  grid-row: 3;
}

.griditem5 {
  background-color: rgba(250, 0, 0, .5);
  grid-column-start: sidebar-start; /* only takes up one cell because grid-column-end default value is one */
  grid-row-start: sidebar-start;
}

.griditem6 {
  grid-area: footer;
}