How can I use CSS grid to create the following layout?

Question

I am using CSS grid to collage three images. However, I can not get the last two smaller images where they need to be. Currently, in the browser, the two small images are above the first large image. Any help welcome.

In CSS I have:

[![enter image description here][1]][1].collage {
    float: left;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns:1fr 1fr;
    grid-template-columns:1fr 1fr;
    gap: 10px;
}
.collage__img:first-child {
      grid-row-start: row1-start;
      grid-row-end: 2;
      grid-column-start: 1;
      grid-column-end: 1;
}
.collage__img:nth-child(2){
     grid-row-start: row1-start;
     grid-row-end: 1;
     grid-column-start: 2;
     grid-column-end: 2;
}
.collage__img:nth-child(3){
    grid-row-start: row2-start;
    grid-row-end: 2;
    grid-column-start: 2;
    grid-column-end: 2;
}

Answer 1

.container{
    display: grid;
    gap: 10px;  
    grid-template-columns: 1fr 1fr
}
.container div {
    background: red;    
}
.container .item1{
    grid-row: 1 / span 2    
}

<div class="container">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
</div>