<div class="grid">
  <img class="item item--tall" src="https://picsum.photos/200/300"/>
  <img class="item item--big" src="https://picsum.photos/200/300"/>
  <img class="item" src="https://picsum.photos/200/300"/>
  <img class="item" src="https://picsum.photos/200/300"/>
  <img class="item" src="https://picsum.photos/200/300"/>
</div>
.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 200px;
  gap: 10px;
  max-width: 600px;
}

.item {
  width: 100%;
  height: 100%;
  object-fit: cover;
  grid-column: span 2;
}

.item--big,
.item--tall {
  grid-column: span 3;
  grid-row: span 2;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.