Как сделать такую галлерею?

.container {
  width: 1000px;
  margin: 0 auto; 
}
 
.gallery {
  display: grid; /*Создание grid контейнера*/
  grid-template-columns: repeat(8, 1fr); /*Указание размера столбцов сетки*/
  grid-template-rows: repeat(8, 70px); /*Указание размера строк сетки*/
  grid-gap: 20px; /*Указание промежутков между строками и столбцами*/
}
 
.gallery__item-1 {
  grid-column-start: 1; /*Начальная позиция элемента в столбце сетки*/
  grid-column-end: 3; /*Конечная позиция элемента в столбце сетки*/
  grid-row-start: 1; /*Начальная позиция элемента в строке сетки*/
  grid-row-end: 3; /*Конечная позиция элемента в строке сетки*/
  background: green;
  margin-right: 30px;
}
 
.gallery__item-2 {
  grid-column-start: 3;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 3;
  background: yellow;
  margin-top: 30px;
}
 
.gallery__item-3 {
  grid-column-start: 5;
  grid-column-end: 9;
  grid-row-start: 1;
  grid-row-end: 6;
  background: blue;
  margin-bottom: 20px;
}
 
.gallery__item-4 {
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 3;
  grid-row-end: 6;
  background: orange;
  margin-right: -10px;
}
 
.gallery__item-5 {
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 6;
  grid-row-end: 9;
  background: red;
}
 
.gallery__item-6 {
  grid-column-start: 5;
  grid-column-end: 6;
  grid-row-start: 6;
  grid-row-end: 9;
  background: gray;
  margin-top: -30px;
}

.gallery__item-7 {
  grid-column-start: 6;
  grid-column-end: 9;
  grid-row-start: 6;
  grid-row-end: 9;
  background: turquoise;
}

<div class="container">
  <div class="gallery">
    <div class="gallery__item-1"></div>
    <div class="gallery__item-2"></div>
    <div class="gallery__item-3"></div>
    <div class="gallery__item-4"></div>
    <div class="gallery__item-5"></div>
    <div class="gallery__item-6"></div>
    <div class="gallery__item-7"></div>
  </div>
</div>