Why rows are higher than other rows on css grid

I’m trying to create a images gallery using grid CSS, but the problem is some rows are higher than others, check that out:

you can notice on the picture1 the row is bigger than the row on picture2 while the window’s size still the same

I tried to

 grid-auto-rows: min-content; 

and

grid-template-rows:repeat(fixed vh or px) ;

but they both gave the result you see on the pictures
the code :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title></title>
</head>
<body>
    <h1>grid practice</h1>
    <p>it took me a week to reach this result</p>

    <section class="container">
        <ul class="gallery">
            <li><img src="img/2.jpg" alt=""></li>
            <li><img src="img/7.jpg" alt=""></li>
            <li><img src="img/5.jpg" alt=""></li>
            <li><img src="img/11.jpeg" alt=""></li>
            <li><img src="img/12.jpeg" alt=""></li>
            <li><img src="img/9.jpeg" alt=""></li>
            <li><img src="img/10.jpeg" alt=""></l i>
            <li><img src="img/6.jpg" alt=""></li>
            <li><img src="img/0.jpeg" alt=""></li>
            <li><img src="img/1.jpg" alt=""></li>
            <li><img src="img/8.jpeg" alt=""></li>
            <li><img src="img/4.jpg" alt="" ></li>
        </ul>
    </section>
</body>
</html>

body{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif
}

.container{
    width: 90%;
    margin: 0 auto;
}

.gallery{
    padding:0; 
    background-color: #bdbdbd;
    list-style: none;
    display: grid;
    width: 100%;
    grid-auto-flow: dense;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    grid-template-rows:repeat(50vh) ;
    /* grid-auto-rows: min-content; */
    grid-gap:0.2rem; 
}

li{
    width: 100%;
    height: 100%;    
}
img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

how can I have them all the same size?

the code on codepen

Hello @HmmamBabiKhouja!

I opened your project on codepen, and to me, they’re all the same size

do you think the problem is on my machine?

I tried to look them on my phone, even with one column! they don’t have the same height

turn the <img> into <div> and the set the pictures as background-img
I’m not convinced with this but is the only way I found to fix this

solution on codepen.com

You broke the cardinal rule of photo galleries which is, all photos must be the same size.

I was trying the span keyword