Masonry Thumbs - Responsive Grid

hello semicolon ... happy and most important HEALTHY new year to all the team !!!

I struggle to make the grid system responsive.
I am using the grid system in php, thats why I have the .'$file'. in code like this:

<div class="masonry-thumbs grid-container grid-4 clearfix" data-lightbox="gallery">
	<a class="grid-item" href="'.$file.'" data-lightbox="gallery-item">
		<div class="grid-inner">
			<img src="'.$file.'" alt="Gallery Image">
			<div class="bg-overlay">
				<div class="bg-overlay-content dark">
					<i class="icon-line-plus h4 mb-0" data-hover-animate="fadeIn"></i>
				</div>
				<div class="bg-overlay-bg dark" data-hover-animate="fadeIn"></div>
			</div>
		</div>
	</a>	
</div>

I was looking for sth like

grid-xs-1
grid-sm-2
grid-md-3
grid-lg-4
grid-xl-6

but that does not seem possible

so how what I realize different grids for different devices?

rgds
stooky

ok thx, I tested it on raw HTML and it works, so there must be an error in my php code.
good to know that it is implemented now I can continue debugging my code.

rgds
stooky

stupid me, I added the classes to the wrong element
all fine, thx, solved
rgds
stooky