HTml, css question. Please make it for me.)

<div class="parent"> 
  <div class="item-1">item 1</div> 
  <div class="item-2">item 2</div> 
  <div class="item-3">item 3</div> 
  <div class="item-4">item 4</div> 
</div>

.parent { 
  display: grid; 
  grid-template-areas:
    "i1 i2 i3"
    "i4 i4 i4";
}
.item-1 {
  grid-area: i1;
}
.item-2 {
  grid-area: i2;
}
.item-3 {
  grid-area: i3;
}
.item-4 {
  grid-area: i4;
}