CSS Grid - Staggered Grid

.header-grid {
  width: 100%;
  height: 100vh;
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr;
  -ms-grid-columns: (1fr)[5];
      grid-template-columns: repeat(5, 1fr);
  grid-template-areas: "big-top big-top big-top small-top small-top" "small-middle small-middle big-middle big-middle big-middle" "big-bottom big-bottom big-bottom big-bottom big-bottom";
}

.block {
  height: 100%;
  width: 100%;
  border: 1px solid white;
  background: black;
  opacity: 0.8;
  transition: opacity 0.2s ease-out;
}

.block:hover {
  transition: opacity 0.2s ease-in;
  opacity: 1;
}

#b1 {
  grid-area: big-top;
}

#b2 {
  grid-area: small-top;
}

#b3 {
  grid-area: small-middle;
}

#b4 {
  grid-area: big-middle;
}

.bottom-block {
  grid-area: big-bottom;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr 1fr;
      grid-template-columns: 1fr 1fr 1fr;
}