<div class="grid">
  <div class="item"><img src='https://images.unsplash.com/photo-1580997335868-53d92ccdb869?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTIxNzc3MDI&ixlib=rb-1.2.1&q=80&w=400' alt=''></div>
  <div class="item"></div>
  <div class="item"><img src='https://images.unsplash.com/photo-1570527140771-020891229bb4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTIxNzc3MDI&ixlib=rb-1.2.1&q=80&w=400' alt=''></div>
  <div class="item"></div>
  <div class="item"><img src='https://images.unsplash.com/photo-1620447875063-19be4e4604bc?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTIxNzc3MDI&ixlib=rb-1.2.1&q=80&w=400' alt=''></div>
  <div class="item"></div>
</div>

* {
  box-sizing: border-box;
}

body {
  --pad: clamp(0.5rem, 2vw, 2rem);
  --pad-sm: calc(var(--pad) / 2);
  --pad-xs: calc(var(--pad) / 4);
  margin: 0;
  padding: var(--pad);
  background: lightblue;
  min-height: 100vh;
  display: grid;
  place-items: center;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--pad);
  width: 100%;
  max-width: 50rem;
  border: max(var(--pad-xs), 0.25rem) solid;
  padding: var(--pad);
  background: white;
}

.item {
  background: deeppink;
  border-radius: var(--pad-xs);
  overflow: hidden;
  aspect-ratio: 1;
}

.grid:nth-child(2) .item:nth-child(3) {
  grid-row: span 2;
}

.grid:nth-child(3) .item:first-child {
  grid-row: span 2;
  grid-column: span 2;
}

.grid:nth-child(4) .item:nth-child(2) {
  grid-column: span 2;
}

.grid:nth-child(4) .item:nth-child(3) {
  grid-column: span 2;
}