Grid gallery where images are not the same size

Question

I think it's best if I try to explain this with a screenshot. So, I am trying to achieve this: https://freeimage.host/i/H9flW3N

My problem is when I do it with grid, the first picture is too short/height not enough to fit the whole grid cell so the gap between the upper left and lower left picture is too big. This is what I have: https://freeimage.host/i/H9f0KMv

Is there a way to achieve the layout from the upper picture with grid where the grid rows adjust according to a picture height? It needs to be responsive of course :/

Also how should I go about positioning the third picture, because it shouldn't be aligned with the first two. Can this be achieved with margins or?

Thank you in advance, this has been driving me insane for a few days now and I can't get it to work. I tried with flexbox, now I'm trying with grid but no result yet

Here's my code:

.fourth {
    display: flex;
    flex-direction: column;
    align-items: center;

}

.collage2 {
    display: grid;
    width: 85%;
    grid-auto-columns: repeat (2, 1fr);
  
   
}

.collage2 > img {
    object-fit: cover;
    width: 100%;
    max-height: 100%;
}

.collage2 img:nth-child(3) {
    grid-row: 1/2;
    grid-column: 2;
  
}

<section class="fourth">
           
                <div class="collage2">
                    <img src="/images/photo-3.jpg" alt="Man drawing on whiteboard">
                    <img src="/images/photo-4.jpg" alt="Ableton address on a brick wall">
                    <img src="/images/photo-5.jpg" alt="Man and woman working at a music studio">
</div>

Answer 1

Did a little play on Codepen, and I think this can give you a basic idea to start with: https://codepen.io/brandonzhang/pen/PoaJyQw?editors=1100

<div class="grid">
  <img src='https://images.unsplash.com/photo-1666880147941-b145c43cfe6b?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Njg2ODQxMDk&ixlib=rb-4.0.3&q=80' alt=''>
  <img src='https://images.unsplash.com/photo-1667489022797-ab608913feeb?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Njg2ODQxMDk&ixlib=rb-4.0.3&q=80' alt=''>
  <img src='https://images.unsplash.com/photo-1593875460489-aa913d8a0fe2?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Njg2ODQxNjk&ixlib=rb-4.0.3&q=80' alt=''>
</div>

img {
  width: 100%;
  object-fit: cover;
}
.grid {
  --gap: 8%;
  display: grid;
  align-items: center;
  justify-items: center;
  grid-template-columns: 2fr 3fr;
  gap: var(--gap);
  padding: var(--gap);
  position: relative;
}

img:nth-of-type(2) {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

img:nth-of-type(3) {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  height: 80%;
}

.grid::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: calc(2 / 5 * 100% + var(--gap) * 2);
  bottom: 0;
  background: lightseagreen;
  z-index: -1;
}