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;
}

You're using grid line names but you haven't defined them anywhere. — Paulie_D, Dec 20 '21 at 17:27
https://stackoverflow.com/questions/42946454/make-a-div-span-two-rows-in-a-grid — Paulie_D, Dec 20 '21 at 17:31

score 4 · Accepted Answer · answered Dec 20 '21 at 17:33

.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>

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

1 Answers1