CSS Grid - Staggered Grid

By John Cheng

F6
#
How do I use This?

A masonry style staggered grid layout.

HTML
<div class="header-grid">
  <div id="b1" class="block"></div>
  <div id="b2" class="block"></div>
  <div id="b3" class="block"></div>
  <div id="b4" class="block"></div>
  <div class="bottom-block">
    <div id="b5" class="block"></div>
    <div id="b6" class="block"></div>
    <div id="b7" class="block"></div>
  </div>
  
</div>
.header-grid {
  width: 100%;
  height: 100vh;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  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;
  
  &: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: grid;
  grid-template-columns: 1fr 1fr 1fr;
  
}

#b5 {
  
}

#b6 {
  
}

#b7 {
  
}

.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;
}

JS