Блок на флексе или на гриде [закрыт]

.grid { 
  display: inline-grid; 
  grid-template-areas: 
    'i1 i2 i3 i6 i7' 
    'i1 i4 i5 i6 i8'; 
  grid-gap: 2px; 
} 
 
.grid .item { 
  min-width: 70px; 
  min-height: 70px; 
  background: red; 
} 
 
.grid .item.i1 {grid-area: i1;} 
.grid .item.i2 {grid-area: i2;} 
.grid .item.i3 {grid-area: i3;} 
.grid .item.i4 {grid-area: i4;} 
.grid .item.i5 {grid-area: i5;} 
.grid .item.i6 {grid-area: i6; min-width: 140px;} 
.grid .item.i7 {grid-area: i7;} 
.grid .item.i8 {grid-area: i8;} 
 
.grid .item img {display: block; width: 100%; height: 100%; object-fit: cover;}

<div class="grid"> 
  <div class="item i1"> 
    <img src="https://via.placeholder.com/70x140?text=i1"> 
  </div> 
  <div class="item i2"> 
    <img src="https://via.placeholder.com/70x70?text=i2"> 
  </div> 
  <div class="item i3"> 
    <img src="https://via.placeholder.com/70x70?text=i3"> 
  </div> 
  <div class="item i4"> 
    <img src="https://via.placeholder.com/70x70?text=i4"> 
  </div> 
  <div class="item i5"> 
    <img src="https://via.placeholder.com/70x70?text=i5"> 
  </div> 
  <div class="item i6"> 
    <img src="https://via.placeholder.com/140x140?text=i6"> 
  </div> 
  <div class="item i7"> 
    <img src="https://via.placeholder.com/70x70?text=i7"> 
  </div> 
  <div class="item i8"> 
    <img src="https://via.placeholder.com/70x70?text=i8"> 
  </div> 
</div>

.grid { 
  display: inline-grid; 
  grid-template-areas: 
    'i1 i2 i3 i6 i7' 
    'i1 i4 i5 i6 i8' 
    /* Тут добавляем новые строчки */ 
    'i9 i10 i11 i14 i15' 
    'i9 i12 i13 i14 i16'; 
  grid-gap: 2px; 
} 
 
.grid .item { 
  min-width: 70px; 
  min-height: 70px; 
  background: red; 
} 
 
.grid .item.i1 {grid-area: i1;} 
.grid .item.i2 {grid-area: i2;} 
.grid .item.i3 {grid-area: i3;} 
.grid .item.i4 {grid-area: i4;} 
.grid .item.i5 {grid-area: i5;} 
.grid .item.i6 {grid-area: i6; min-width: 140px;} 
.grid .item.i7 {grid-area: i7;} 
.grid .item.i8 {grid-area: i8;} 
 
/* Ну и тут рассписываем. 
  Хотя я бы подключил JS для этих "росписей" */ 
.grid .item.i9 {grid-area: i9;} 
.grid .item.i10 {grid-area: i10;} 
.grid .item.i11 {grid-area: i11;} 
.grid .item.i12 {grid-area: i12;} 
.grid .item.i13 {grid-area: i13;} 
.grid .item.i14 {grid-area: i14; min-width: 140px;} 
.grid .item.i15 {grid-area: i15;} 
.grid .item.i16 {grid-area: i16;} 
 
.grid .item img {display: block; width: 100%; height: 100%; object-fit: cover;} 
 
 
/* "отделил" эти блоки, так что это можно удалить */ 
.grid .item.i9, .grid .item.i10, .grid .item.i11, 
.grid .item.i12, .grid .item.i13, .grid .item.i14, 
.grid .item.i15, .grid .item.i16 {border: 1px solid green; box-sizing: border-box;}

<div class="grid"> 
  <div class="item i1"> 
    <img src="https://via.placeholder.com/70x140?text=i1"> 
  </div> 
  <div class="item i2"> 
    <img src="https://via.placeholder.com/70x70?text=i2"> 
  </div> 
  <div class="item i3"> 
    <img src="https://via.placeholder.com/70x70?text=i3"> 
  </div> 
  <div class="item i4"> 
    <img src="https://via.placeholder.com/70x70?text=i4"> 
  </div> 
  <div class="item i5"> 
    <img src="https://via.placeholder.com/70x70?text=i5"> 
  </div> 
  <div class="item i6"> 
    <img src="https://via.placeholder.com/140x140?text=i6"> 
  </div> 
  <div class="item i7"> 
    <img src="https://via.placeholder.com/70x70?text=i7"> 
  </div> 
  <div class="item i8"> 
    <img src="https://via.placeholder.com/70x70?text=i8"> 
  </div> 
  <div class="item i9"> 
    <img src="https://via.placeholder.com/70x140?text=i9"> 
  </div> 
  <div class="item i10"> 
    <img src="https://via.placeholder.com/70x70?text=i10"> 
  </div> 
  <div class="item i11"> 
    <img src="https://via.placeholder.com/70x70?text=i11"> 
  </div> 
  <div class="item i12"> 
    <img src="https://via.placeholder.com/70x70?text=i12"> 
  </div> 
  <div class="item i13"> 
    <img src="https://via.placeholder.com/70x70?text=i13"> 
  </div> 
  <div class="item i14"> 
    <img src="https://via.placeholder.com/140x140?text=i14"> 
  </div> 
  <div class="item i15"> 
    <img src="https://via.placeholder.com/70x70?text=i15"> 
  </div> 
  <div class="item i16"> 
    <img src="https://via.placeholder.com/70x70?text=i16"> 
  </div> 
</div>