row-span in doesn't work in tailwind with multiple images - css-grid

Question

im trying to creat a css grid layout with multiple images using tailwind but im stuck because when i'm trying to span the rows it doesn't work, basicly i want the images to go down to the row-4 but theye stay at row-2
this is my reference: this is the layout im trying to do
this is my result: enter image description here
my code:
<div class="container grid grid-cols-4 grid-rows-4 gap-4 p-4">
<img src="/img/h1.jpg" class="col-span-2" alt="">
<img src="/img/v1.jpg" class="row-span-4 " alt="">
<img src="/img/v2.jpg" class="row-span-4" alt="">
<img src="/img/h2.jpg" class="col-span-2"alt="">
</div>

Answer 1

There are two things I think you need to change.
The first is the size of the grid: the grid in your example does not have 4 rows, but only two. You need to change the row and col span accordingly.
The second is the use of images in the grid. If you use images, it seems they need to have the exact correct aspect ratio for the grid, otherwise they will not align. Therefore I suggest you use divs.
You can see a working example here. I also included the not correct working version with images in it.
Simplified version of the code:
<div class="w-5/6 h-64 grid grid-cols-4 grid-rows-2 gap-4">
<div class="col-span-2 row-span-1 rounded-lg bg-cover bg-[url(...)]">1</div>
<div class="row-span-2 rounded-lg bg-cover bg-[url(...)]">2</div>
<div class="row-span-2 rounded-lg bg-cover bg-[url(...)]">3</div>
<div class="col-span-2 row-span-1 rounded-lg bg-cover bg-[url(...)]">4</div>
</div>