<div class="grid">
  <img src="https://picsum.photos/100/50?random=1" alt="">
  <img src="https://picsum.photos/100/50?random=2" alt="">
  <img src="https://picsum.photos/100/50?random=3" alt="">
  <img src="https://picsum.photos/100/50?random=4" alt="">
  <img src="https://picsum.photos/100/50?random=5" alt="">
  <img src="https://picsum.photos/100/50?random=6" alt="">
  <img src="https://picsum.photos/100/50?random=7" alt="">
  <img src="https://picsum.photos/100/50?random=8" alt="">
  <img src="https://picsum.photos/100/50?random=9" alt="">
  <img src="https://picsum.photos/100/50?random=10" alt="">
  <img src="https://picsum.photos/100/50?random=11" alt="">
  <img src="https://picsum.photos/100/50?random=12" alt="">
  <img src="https://picsum.photos/100/50?random=13" alt="">
</div>

body {
  background-color: royalblue;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 100px);
  grid-auto-rows: 50px;
  grid-gap: 8px;
}

.grid > img {
  border: 1px solid white;
}

.grid > img:first-child {
  grid-column: 3
}

.grid > img:nth-child(3) {
  grid-column: 2
}