CSS Image/Video Grid breaking - html

Question

i've been having issues with the image/video grid (similar to Instagram). It does have some Ajax like loading more contents on scroll (which is working fine) but the only problem I have which I couldn't seem to fix or find answers anywhere is the grid.
Before you answer, please note the following:
I am using a template called: AdminLTE 3
Template is powered in Bootstrap 4
I am using CSS Instagram Grid Example
Using the latest jQuery (3.6.0)
Here's a video on what I'm talking about and having issues with
Alright, let's get started.
Here is the CSS Styles that I am using:
.uploads-wrapper
{
display: grid;
grid-template-columns: repeat(4, minmax(100px, 293px));
justify-content: center;
grid-gap: 10px;
}
.uploads-content-post
{
cursor: pointer;
position: relative;
display: block;
}
.uploads-content-post-image
{
margin: 0;
}
.uploads-content-post-image img
{
width: 100%;
height: 293px;
vertical-align: top;
}
.uploads-content-post-overlay
{
background: rgba(0,0,0, .4);
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
display: none;
align-items: center;
justify-content: center;
color: white;
text-align: center;
}
.uploads-content-post:hover .uploads-content-post-overlay
{
display: flex;
}
.uploads-content-post-like
{
width: 80px;
margin: 50%;
font-size: 18px;
font:100%;
margin-left: 100px;
font-weight: 100;
text-align: center;
display: inline-block;
}
#media screen and (max-width: 501px)
{
.uploads-content-post-image img
{
width: 100%;
height: 130px !important;
overflow: hidden;
}
.uploads-content-post-like
{
font-size: 14px;
}
.uploads-content-post-like
{
font-size: 15px;
font:auto;
margin: 50% !important;
}
}
#media screen and (max-width: 600px)
{
.uploads-content-post-image img
{
width: 100%;
height: 140px;
overflow: hidden;
}
.uploads-content-post-like
{
font-size: 15px;
font:auto;
margin: 50% !important;
}
}
#media screen and (max-width: 601px)
{
.uploads-content-post-image img
{
width: 100%;
height: 180px;
overflow: hidden;
}
.uploads-content-post-like
{
font-size: 15px;
font:auto;
margin: 50% !important;
}
}
#media screen and (max-width: 758px)
{
.uploads-content-post-like
{
margin: 50%;
}
.uploads-content-post-like
{
font-size: 15px;
font:auto;
margin: 50% !important;
}
}
#media screen and (max-width: 768px)
{
.uploads-wrapper
{
grid-gap: 3px;
}
.uploads-content-post-image img
{
width: 100%;
height: 220px;
overflow: hidden;
}
.uploads-content-post-like
{
font-size: 15px;
margin: 50% !important;
font:auto;
}
}
Picture example
What I've noticed is that the .uploads-wrapper seems to be the main problem here. I am using PHP as a server side programming language, and just before I call the PHP's "while loop" to fetch more uploads, i've placed this:
<section class="uploads-wrapper" style="margin-top:10px;">
So to put it simple, I don't want the grid to break in to blank column as you can see in the picture/video example. I want it to work like Instagram's grid (I know Instagram's is 3, but I prefer 4 since it fits well in AdminLTE 3 template).
If you require additional information please let me know. I'd like to learn what the issue is here and hopefully i'll be able to fight it in the future if an issue like that or something similar appears in the future or so. Thank you guys for your time answers.
EDIT: As #Ben Souchet mentioned, the code after .uploads-wrapper is as follows:
<div class="uploads-content-post">
<a href="#">
<figure class="uploads-content-post-image">
<img alt src="example.jpg" class="img-fluid" decoding="auto" style="object-fit: cover;">
</figure>
<div class="uploads-media-type-icon-placeholder">
<span class="uploads-media-type-icon">
<i class="fas fa-heart"></i>
</span>
</div>
<span class="uploads-content-post-overlay">
<p>
<span class="uploads-content-post-like">0</span>
</p>
</span>
</a>
</div>
I also don't have a live website, it's in localhost.