#wrapper {
  display: grid;                            /* 1 */
  grid-template-columns: repeat(7);         /* 2 */
  grid-auto-rows: auto;                     /* 3 */
  grid-gap: 0px;                            /* 4 */
  width: 100%;
}

#wrapper img{
  width: 100%;
  height: 100%;
}
@supports(object-fit: cover){
    .box img{
      height: 100%;
      object-fit: cover;
      object-position: center center;
    }
}

.tall {
  grid-row: 1 / 11;                          /* 5 */
  grid-column: 1 / 5;                       /* 5 */
}

.wide1 {
  grid-row: 1 / 6;                          /* 6 */
  grid-column: 5 / 7;                       /* 6 */
}

.wide2 {
  grid-row: 6 / 11;                          /* 6 */
  grid-column: 5 / 7;                       /* 6 */
}

.block1 {
  background-color: white;
}
.block2 {
  background-color: white;
}
.block3 {
  background-color: white;
}
.block4 {
  background-color: pink;
}
.block5 {
  background-color: lightskyblue;
}
.block6 {
  background-color: lightgreen;
}
.block7 {
  background-color: blue;
}
.block8 {
  background-color: lime;
}
.block9 {
  background-color: lightgrey;
}
.block10 {
  background-color: black;
}
.block11 {
  background-color: grey;
}
.block12 {
  background-color: plum;
}