.grid {
  display: grid;
  gap: 16px;
  background-color: rgb(233, 233, 233);

  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}

.box {
  border: 3px solid red;
  background-color: #ff000011;
  color: #F00;
  font-size: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

pcの時

/* pc  */
.item1 {
  grid-column: 1;
  grid-row: 1;
}

.item2 {
  grid-column: 1;
  grid-row: 2;
}

.item3 {
  grid-column: 1;
  grid-row: 3;
}

.item4 {
  grid-column: 2;
  grid-row: 1/4;
}

item4 は 高さが 1 〜 4 なので

  grid-row: 1/4;

と記述します。

spの時

@media (width < 768px) {
  .item1 {
    grid-column: 1/2;
    grid-row: 1/2;
  }

  .item2 {
    grid-column: 1/2;
    grid-row: 2/3;
  }

  .item3 {
    grid-column: 1/3;
    grid-row: 3/4;
  }

  .item4 {
    grid-column: 2/3;
    grid-row: 1/3;
  }
}