JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid">
  <div class="spanWidth">
    <img src="https://loremflickr.com/290/130?random=1" />
  </div>
  <div>
    <img src="https://loremflickr.com/140/130?random=2" />
  </div>
  <div>
    <img src="https://loremflickr.com/140/180?random=3" />
  </div>
  <div>
    <img src="https://loremflickr.com/140/130?random=4" />
  </div>
  <div>
    <img src="https://loremflickr.com/140/130?random=5" />
  </div>
  <div>
    <img src="https://loremflickr.com/140/180?random=6" />
  </div>
  <div>
    <img src="https://loremflickr.com/140/130?random=7" />
  </div>
</div>

CSS

.grid {
  display: grid;
  grid-gap: 10px;
}

.spanWidth {
  grid-column: 1 / span 2;
}

.grid > div > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}