<div class="g">
  <div class="i">1</div>
  <div class="i">2</div>
  <div class="i">3</div>
  <div class="i">4</div>
  <div class="i">5</div>
  <div class="i">6</div>
</div>
.g {
  display: grid;
  grid-template-columns: 50px 50px;
  grid-auto-rows: 50px;
  gap: 4px;
}

.i {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  background-color: red;
}

.i:last-child {
  background-color: green;
  grid-row-start: 1;
  grid-row-end: 3;
}

.i:nth-child(4) {
  /* Так как last-child теперь на первом месте и занимает 2 строки, то всё сместилось и четвёртый займёт следующие 2 строки относительно своей текущей позции. */
  background-color: blue;
  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.