Grid Tiles – Colspan / Rowspan

<section class="tiles">
  <div class="wrapper grid-container">
    <img class="grid-item" src="assets/images/hero/hero-1.jpg" alt="" />
    <img class="grid-item" src="assets/images/hero/hero-2.jpg" alt="" />
    <img class="grid-item" src="assets/images/hero/hero-3.jpg" alt="" />
    <img class="grid-item" src="assets/images/hero/hero-4.jpg" alt="" />
  </div>
</section>

.tiles {
  margin: 30px 0;
  .grid-container {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(3, 1fr);
  }
  .grid-item {
    min-height: 200px;
    height: 100%;
    img {
      object-fit: cover;
    }
  }
  .grid-item:nth-child(1) {
    grid-column: 1 / 2;
  }
  .grid-item:nth-child(4) {
    grid-row: 2 / 3;
  }
  .grid-item:nth-child(1) {
    grid-row: 1 / 3;
  }
  .grid-item:nth-child(4) {
    grid-column: 2 / 4;
  }
}