<div class="grid">
  
  <div class="grid__row">
    <div class="grid__cell">
      <img src="https://imgholder.ru/500x300/8493a8/adb9ca&text=IMAGE+HOLDER&font=kelson" alt="Image 1" class="grid__image" />
    </div>
    <div class="grid__cell">
      <img src="https://imgholder.ru/600x300/8493a8/adb9ca&text=IMAGE+HOLDER&font=kelson" alt="Image 2" class="grid__image" />
    </div>
    <div class="grid__cell">
      <img src="https://imgholder.ru/300x300/8493a8/adb9ca&text=IMAGE+HOLDER&font=kelson" alt="Image 3" class="grid__image" />
    </div>
  </div>
  
  <div class="grid__row">
    <div class="grid__cell">
      <img src="https://imgholder.ru/600x300/8493a8/adb9ca&text=IMAGE+HOLDER&font=kelson" alt="Image 4" class="grid__image" />
    </div>
    <div class="grid__cell">
      <img src="https://imgholder.ru/300x300/8493a8/adb9ca&text=IMAGE+HOLDER&font=kelson" alt="Image 5" class="grid__image" />
    </div>
    <div class="grid__cell">
      <img src="https://imgholder.ru/600x300/8493a8/adb9ca&text=IMAGE+HOLDER&font=kelson" alt="Image 6" class="grid__image" />
    </div>
  </div>
  
  <div class="grid__row">
    <div class="grid__cell">
      <img src="https://imgholder.ru/600x300/8493a8/adb9ca&text=IMAGE+HOLDER&font=kelson" alt="Image 7" class="grid__image" />
    </div>
    <div class="grid__cell">
      <img src="https://imgholder.ru/200x300/8493a8/adb9ca&text=IMAGE+HOLDER&font=kelson" alt="Image 8" class="grid__image" />
    </div>
    <div class="grid__cell">
      <img src="https://imgholder.ru/400x300/8493a8/adb9ca&text=IMAGE+HOLDER&font=kelson" alt="Image 9" class="grid__image" />
    </div>
  </div>
</div>

.grid {
  display: flex;
  flex-direction: column;
}

.grid__row {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 20px;
}

.grid__cell {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.grid__image {
  object-fit: cover;
  max-width: 100%;
  max-height: 100%;
}