Develop Reference

How to make a horizontal thumbnail scrollable carausel in Vue?

I am trying to replicate this sort of a thumbnail container which is horizontal scrollable.
I have a GARMENTS button in my Vue.js Code that returns thumbnails as follows.
I am getting my thumbnails from the firebase storage and I want the carousel to look more like the first image with the horizontal scroll. What should I add to make it like so?
Here is the code for the Buttons Component:
<template>
<div class="gallery-container gallery-garments hide">
<div v-for="gar in allGarments" :key="gar.id" class="gallery-item">
<img :src="getImgUrl(gar.thumbnailLink)" height="150" width="100">
<span style="display:block">{{gar.name}}</span>
</div>
</div>
<v-btn color="primary" v-on:click="toggleGallery('garments')">Garments</v-btn>
<v-btn>Templates</v-btn>
<v-btn>Download</v-btn>
<v-btn>Share</v-btn>
</template>
<script>
export default {
name: "Buttons",
data () {
return {
garments: [],
}
},
methods: {
toggleGallery(type) {
document.querySelectorAll(".gallery-container").forEach(el => {
if (!el.classList.contains(`gallery-${type}`)) {
el.classList.add("hide")
}
})
document.querySelector(`.gallery-${type}`).classList.toggle("hide")
},
getImgUrl(url){ return url; }
}
}
</script>
<style>
</style>

In your CSS, a good start would be:
.gallery-container {
display: flex;
flex-direction: row;
height: 200px;
overflow-x: scroll;
}
Demo:
.gallery-item {
display: inline-block;
}
.gallery-container {
display: flex;
flex-direction: row;
height: 200px;
overflow-x: scroll;
}
<div class="gallery-container gallery-garments hide">
<div class="gallery-item">
<img src="" height="150" width="100">
<span style="display:block">Name</span>
</div>
<div class="gallery-item">
<img src="" height="150" width="100">
<span style="display:block">Name</span>
</div>
<div class="gallery-item">
<img src="" height="150" width="100">
<span style="display:block">Name</span>
</div>
<div class="gallery-item">
<img src="" height="150" width="100">
<span style="display:block">Name</span>
</div>
<div class="gallery-item">
<img src="" height="150" width="100">
<span style="display:block">Name</span>
</div>
<div class="gallery-item">
<img src="" height="150" width="100">
<span style="display:block">Name</span>
</div>
<div class="gallery-item">
<img src="" height="150" width="100">
<span style="display:block">Name</span>
</div>
<div class="gallery-item">
<img src="" height="150" width="100">
<span style="display:block">Name</span>
</div>
</div>

Multiple Animations Javascript HTML

I am trying to run 3 different animations side by side at the same time. Currently only the first animation is operating and the other 2 are stationary.
Can anyone advise how to run all 3 at once?
Javascript
onload = function startAnimation() {
var frames = document.getElementById("animation").children;
var frameCount = frames.length;
var i = 0;
setInterval(function () {
frames[i % frameCount].style.display = "none";
frames[++i % frameCount].style.display = "block";
}, 100);
}
HTML
<script src="animate.js"></script>
<section>
<div class="row">
<div class="col-md-4" id="animation">
<img src="animations/walk/Armature_walk_00.png">
<img src="animations/walk/Armature_walk_01.png">
<img src="animations/walk/Armature_walk_02.png">
<img src="animations/walk/Armature_walk_03.png">
<img src="animations/walk/Armature_walk_04.png">
<img src="animations/walk/Armature_walk_05.png">
<img src="animations/walk/Armature_walk_06.png">
<img src="animations/walk/Armature_walk_07.png">
<img src="animations/walk/Armature_walk_08.png">
<img src="animations/walk/Armature_walk_09.png">
<img src="animations/walk/Armature_walk_10.png">
<img src="animations/walk/Armature_walk_11.png">
<img src="animations/walk/Armature_walk_12.png">
<img src="animations/walk/Armature_walk_13.png">
<img src="animations/walk/Armature_walk_14.png">
<img src="animations/walk/Armature_walk_15.png">
</div>
<div class="col-md-4" id="animation">
<img src="animations/jump/Armature_jump_0.png">
<img src="animations/jump/Armature_jump_1.png">
<img src="animations/jump/Armature_jump_2.png">
<img src="animations/jump/Armature_jump_3.png">
<img src="animations/jump/Armature_jump_4.png">
<img src="animations/jump/Armature_jump_5.png">
<img src="animations/jump/Armature_jump_6.png">
<img src="animations/jump/Armature_jump_7.png">
<img src="animations/jump/Armature_jump_8.png">
</div>
<div class="col-md-4" id="animation">
<img src="animations/melt/Melt_1.png">
<img src="animations/melt/Melt_2.png">
<img src="animations/melt/Melt_3.png">
<img src="animations/melt/Melt_4.png">
<img src="animations/melt/Melt_5.png">
<img src="animations/melt/Melt_6.png">
<img src="animations/melt/Melt_7.png">
<img src="animations/melt/Melt_8.png">
<img src="animations/melt/Melt_9.png">
<img src="animations/melt/Melt_10.png">
<img src="animations/melt/Melt_11.png">
<img src="animations/melt/Melt_12.png">
<img src="animations/melt/Melt_13.png">
<img src="animations/melt/Melt_14.png">
<img src="animations/melt/Melt_15.png">
</div>
</div>
</section>
CSS
#animation img {
display: none;
width: 50%;
height: auto;
}
#animation img:first-child {
display: block;
width: 50%;
height: auto;
}

You're not supposed to have multiple elements with the same id in a page. You should either give them different ids or give them the same class and use that in your logic. Like this:
<script src="animate.js"></script>
<section>
<div class="row">
<div class="col-md-4 animation">
<img src="animations/walk/Armature_walk_00.png">
<img src="animations/walk/Armature_walk_01.png">
<img src="animations/walk/Armature_walk_02.png">
<img src="animations/walk/Armature_walk_03.png">
<img src="animations/walk/Armature_walk_04.png">
<img src="animations/walk/Armature_walk_05.png">
<img src="animations/walk/Armature_walk_06.png">
<img src="animations/walk/Armature_walk_07.png">
<img src="animations/walk/Armature_walk_08.png">
<img src="animations/walk/Armature_walk_09.png">
<img src="animations/walk/Armature_walk_10.png">
<img src="animations/walk/Armature_walk_11.png">
<img src="animations/walk/Armature_walk_12.png">
<img src="animations/walk/Armature_walk_13.png">
<img src="animations/walk/Armature_walk_14.png">
<img src="animations/walk/Armature_walk_15.png">
</div>
<div class="col-md-4 animation">
<img src="animations/jump/Armature_jump_0.png">
<img src="animations/jump/Armature_jump_1.png">
<img src="animations/jump/Armature_jump_2.png">
<img src="animations/jump/Armature_jump_3.png">
<img src="animations/jump/Armature_jump_4.png">
<img src="animations/jump/Armature_jump_5.png">
<img src="animations/jump/Armature_jump_6.png">
<img src="animations/jump/Armature_jump_7.png">
<img src="animations/jump/Armature_jump_8.png">
</div>
<div class="col-md-4 animation" >
<img src="animations/melt/Melt_1.png">
<img src="animations/melt/Melt_2.png">
<img src="animations/melt/Melt_3.png">
<img src="animations/melt/Melt_4.png">
<img src="animations/melt/Melt_5.png">
<img src="animations/melt/Melt_6.png">
<img src="animations/melt/Melt_7.png">
<img src="animations/melt/Melt_8.png">
<img src="animations/melt/Melt_9.png">
<img src="animations/melt/Melt_10.png">
<img src="animations/melt/Melt_11.png">
<img src="animations/melt/Melt_12.png">
<img src="animations/melt/Melt_13.png">
<img src="animations/melt/Melt_14.png">
<img src="animations/melt/Melt_15.png">
</div>
</div>
</section>
CSS
.animation img {
display: none;
width: 50%;
height: auto;
}
.animation img:first-child {
display: block;
width: 50%;
height: auto;
}
And in your js, do:
onload = function startAnimation() {
var framesContainers = document.getElementsByClassName("animation");
for (const container of framesContainers) {
var frames = container.children;
var frameCount = frames.length;
var i = 0;
setInterval(function () {
frames[i % frameCount].style.display = "none";
frames[++i % frameCount].style.display = "block";
}, 100);
}
}

How to prevent jQuery apendTo from duplicating content

I'm trying to move a div(.titleContainer) inside another div(.imageContainer a) by using jQuery prependTo function, but for some reason the the content that was previously appended is also added to the element that's receiving an appended element. Thanks!
$(document).ready(function () {
$('.titleContainer').each(function(){
$(this).prependTo('.imageContainer a');
});
});
.imageContainer{
background: rgb(144, 144, 221);
}
.card{
margin-right: 20px;
flex: 0 0 30%;
}
h3{
color: black
}
body{
display: flex;
justify-content: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="card">
<div class="titleContainer">
<h3>title1</h3>
</div>
<div class="imageContainer">
<a href="">
<img src="" alt="">
</a>
</div>
</div>
<div class="card">
<div class="titleContainer">
<h3>title2</h3>
</div>
<div class="imageContainer">
<a href="">
<img src="" alt="">
</a>
</div>
</div>
<div class="card">
<div class="titleContainer">
<h3>title3</h3>
</div>
<div class="imageContainer">
<a href="">
<img src="" alt="">
</a>
</div>
</div>
</body>

You need to target .imageContainer within the same .card. Using '.imageContainer a' will target all a
$(document).ready(function() {
$('.titleContainer').each(function() {
$(this).prependTo($(this).closest('.card').find('.imageContainer a'));
});
});
.imageContainer {
background: rgb(144, 144, 221);
}
.card {
margin-right: 20px;
flex: 0 0 30%;
}
h3 {
color: black
}
body {
display: flex;
justify-content: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="card">
<div class="titleContainer">
<h3>title1</h3>
</div>
<div class="imageContainer">
<a href="">
<img src="" alt="">
</a>
</div>
</div>
<div class="card">
<div class="titleContainer">
<h3>title2</h3>
</div>
<div class="imageContainer">
<a href="">
<img src="" alt="">
</a>
</div>
</div>
<div class="card">
<div class="titleContainer">
<h3>title3</h3>
</div>
<div class="imageContainer">
<a href="">
<img src="" alt="">
</a>
</div>
</div>
</body>

$(function(){
$('.titleContainer').each(function(){
$(this).prependTo($(this).next().find('a'));
});
});
Codepen
Note: $(function(){}) === $(document).ready(function(){});

images in grid change in specified time interval using jquery or other javascript

I am trying to develop an image grid that changes some images in random at specified intervals using jquery or any other javascript means. Please be noted that I do not need all the images to change at the same time. One group of an image can change in different time interval compared to others.
The images are positioned absolute to the parent div so that it one can fadeIn while the other fades out until it reaches the last stage.
I am completely stuck without any idea on how to achieve this. Could anyone help me with this? Following is my code
(function(){
let first = $('.column1 img:gt(0)');
first.hide();
let images = $('.column1').find('img');
setInterval(function(){
let current = $('.column1 img:visible');
let next = current.next().length ? current.next():$('.column1 img:eq(0)');
current.fadeOut(300);
next.fadeIn(300);
}, 3000);
});
#main__slider{
width:40rem;
height:25rem;
margin: 0 auto;
display:grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr)
}
.column1{
border:1px solid;
position:relative;
}
img{
width:100%;
height:100%;
object-fit:cover;
position:absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main__slider">
<div class="column1">
<img src="https://www.arup.com/-/media/arup/images/perspectives/themes/cities/cities-alive/cities-alive-header.jpg?h=1125&la=en&w=2000&hash=415B3F648DFB5F1822DD43328B988A2C78318E7F" alt="">
<img src="https://livability.com/sites/default/files/Great%20Cities%20for%20Filmmakers.jpg" alt="">
</div>
<div class="column1">
<img src="https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Common-dog-behaviors-explained.jpg?itok=FSzwbBoi" alt="">
<img src="https://d17fnq9dkz9hgj.cloudfront.net/uploads/2018/03/Pomeranian_01.jpeg" alt="">
</div>
<div class="column1">
<img src="https://i.kinja-img.com/gawker-media/image/upload/s--vHt6tbFa--/c_scale,f_auto,fl_progressive,q_80,w_800/xjmx1csashjww8j8jwyh.jpg" alt="">
<img src="https://www.drdavidludwig.com/wp-content/uploads/2017/01/1-RIS_6IbCLYv1X3bzYW1lmA.jpeg" alt="">
</div>
<div class="column1">
<img src="https://www.railengineer.uk/wp-content/uploads/2017/10/AT300_HULL-TRAINS_with-logo.jpg" alt="">
<img src="https://www.virginexperiencedays.co.uk/content/img/product/large/steam-train-trip-17104839.jpg" alt="">
</div>
<div class="column1">
<img src="https://www.healthline.com/hlcmsresource/images/topic_centers/977-When_do_girls_stop_growing-732x549-thumbnail.jpg" alt="">
<img src="https://images.askmen.com/1080x540/2018/09/06-125712-how_to_talk_to_girls_on_tinder.jpg" alt="">
</div>
<div class="column1">
<img src="https://www.familyeducation.com/sites/default/files/inline-images/baby%20girl%20names%20image.jpg" alt="">
<img src="https://cdn2.momjunction.com/wp-content/uploads/2015/03/Learning-Activities.jpg" alt="">
</div>
<div class="column1">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Team_Korea_Rio_2016_06.jpg/1200px-Team_Korea_Rio_2016_06.jpg" alt="">
<img src="https://expo.advance.net/img/9c4d2bc2c7/width960/30gallery_state_indiv_gym_.jpeg" alt="">
</div>
<div class="column1">
<img src="https://cdn4.sportngin.com/attachments/call_to_action/9127/0843/_7006687_large.jpg" alt="">
<img src="https://cdn.vox-cdn.com/thumbor/4pOVrNf6Ezmge6_VKHgYmAyCNoU=/0x0:3642x2712/1200x800/filters:focal(1275x341:1857x923)/cdn.vox-cdn.com/uploads/chorus_image/image/54106607/usa_today_9864342.0.jpg" alt="">
</div>
<div class="column1">
<img src="https://livability.com/sites/default/files/Great%20Cities%20for%20Filmmakers.jpg" alt="">
<img src="https://media.wired.com/photos/59bafdf204afdc5248726f5c/master/w_2400,c_limit/BMW-TA.jpg" alt="">
</div>
</div>

You need to create a kind of loop like below and also consider random() to have different timing for the fade function:
$('.column1 img:eq(0)').each(function() {
$(this).hide();
});
setInterval(function() {
$('.column1 img:visible').each(function() {
let next = $(this).next().length ? $(this).next() : $(this).parent().find('img:eq(0)');
var t = Math.random()*2000;
$(this).delay(t).fadeOut(500);
next.delay(t).fadeIn(500);
});
}, 3000);
#main__slider {
width: 40rem;
height: 25rem;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr)
}
.column1 {
border: 1px solid;
position: relative;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main__slider">
<div class="column1">
<img src="https://www.arup.com/-/media/arup/images/perspectives/themes/cities/cities-alive/cities-alive-header.jpg?h=1125&la=en&w=2000&hash=415B3F648DFB5F1822DD43328B988A2C78318E7F" alt="">
<img src="https://livability.com/sites/default/files/Great%20Cities%20for%20Filmmakers.jpg" alt="">
</div>
<div class="column1">
<img src="https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Common-dog-behaviors-explained.jpg?itok=FSzwbBoi" alt="">
<img src="https://d17fnq9dkz9hgj.cloudfront.net/uploads/2018/03/Pomeranian_01.jpeg" alt="">
</div>
<div class="column1">
<img src="https://i.kinja-img.com/gawker-media/image/upload/s--vHt6tbFa--/c_scale,f_auto,fl_progressive,q_80,w_800/xjmx1csashjww8j8jwyh.jpg" alt="">
<img src="https://www.drdavidludwig.com/wp-content/uploads/2017/01/1-RIS_6IbCLYv1X3bzYW1lmA.jpeg" alt="">
</div>
<div class="column1">
<img src="https://www.railengineer.uk/wp-content/uploads/2017/10/AT300_HULL-TRAINS_with-logo.jpg" alt="">
<img src="https://www.virginexperiencedays.co.uk/content/img/product/large/steam-train-trip-17104839.jpg" alt="">
</div>
<div class="column1">
<img src="https://www.healthline.com/hlcmsresource/images/topic_centers/977-When_do_girls_stop_growing-732x549-thumbnail.jpg" alt="">
<img src="https://images.askmen.com/1080x540/2018/09/06-125712-how_to_talk_to_girls_on_tinder.jpg" alt="">
</div>
<div class="column1">
<img src="https://www.familyeducation.com/sites/default/files/inline-images/baby%20girl%20names%20image.jpg" alt="">
<img src="https://cdn2.momjunction.com/wp-content/uploads/2015/03/Learning-Activities.jpg" alt="">
</div>
<div class="column1">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Team_Korea_Rio_2016_06.jpg/1200px-Team_Korea_Rio_2016_06.jpg" alt="">
<img src="https://expo.advance.net/img/9c4d2bc2c7/width960/30gallery_state_indiv_gym_.jpeg" alt="">
</div>
<div class="column1">
<img src="https://cdn4.sportngin.com/attachments/call_to_action/9127/0843/_7006687_large.jpg" alt="">
<img src="https://cdn.vox-cdn.com/thumbor/4pOVrNf6Ezmge6_VKHgYmAyCNoU=/0x0:3642x2712/1200x800/filters:focal(1275x341:1857x923)/cdn.vox-cdn.com/uploads/chorus_image/image/54106607/usa_today_9864342.0.jpg" alt="">
</div>
<div class="column1">
<img src="https://livability.com/sites/default/files/Great%20Cities%20for%20Filmmakers.jpg" alt="">
<img src="https://media.wired.com/photos/59bafdf204afdc5248726f5c/master/w_2400,c_limit/BMW-TA.jpg" alt="">
</div>
</div>

CSS: Images in different sizes centered inside a list of responsive floating divs

I have a list of product in a responsive page, each row display 4 product, and the size of each product should be constant for all the products in the page, but adjusted to the size of the screen - i.e. 25% of the screen width.
example https://jsfiddle.net/eliaweiss/otLcf1kn/
.prod {
width: 25%;
float: left;
}
img {
width: 100%;
}
<div class="list">
<div class="prod">
<img src="https://esoterica-shop.com/634-home_default/-Brown-Ethnic-Earrings-with-AquaMarine-Crystal-And-k-gold-filled-Boho-Chic-TRIBAL-Jewelry-Macram-Gypsy-Belly-Dance-Earring.jpg" alt="">
</div>
<div class="prod">
<img src="https://esoterica-shop.com/641-home_default/-Tribal-earrings-Brown-Tribal-earrings-Macrame-earrings-Red-wine-Boho-earrings-e-Bohemian-earrings-Indian-earrings-Lotus.jpg" alt="">
</div>
<div class="prod">
<img src="https://esoterica-shop.com/644-home_default/-Sale-tribal-earrings-Green-gold-and-white-pearl-hoops-micro-macrame-hippie-earrings-boho-tribal-earrings-gypsy-earrings.jpg" alt="">
</div>
<div class="prod">
<img src="https://esoterica-shop.com/679-home_default/-Sale-tribal-earrings-Silver-and-Red-Classic-macrame-Earrings-with-delicate-GARNET-gemstone-TRIBAL-jewelry-bohemian-gypsy-jewel.jpg" alt="">
</div>
<div class="prod">
<img src="https://esoterica-shop.com/634-home_default/-Brown-Ethnic-Earrings-with-AquaMarine-Crystal-And-k-gold-filled-Boho-Chic-TRIBAL-Jewelry-Macram-Gypsy-Belly-Dance-Earring.jpg" alt="">
</div>
<div class="prod">
<img src="https://esoterica-shop.com/641-home_default/-Tribal-earrings-Brown-Tribal-earrings-Macrame-earrings-Red-wine-Boho-earrings-e-Bohemian-earrings-Indian-earrings-Lotus.jpg" alt="">
</div>
<div class="prod">
<img src="https://esoterica-shop.com/679-home_default/-Sale-tribal-earrings-Silver-and-Red-Classic-macrame-Earrings-with-delicate-GARNET-gemstone-TRIBAL-jewelry-bohemian-gypsy-jewel.jpg" alt="">
</div>
<div class="prod">
<img src="https://esoterica-shop.com/644-home_default/-Sale-tribal-earrings-Green-gold-and-white-pearl-hoops-micro-macrame-hippie-earrings-boho-tribal-earrings-gypsy-earrings.jpg" alt="">
</div>
</div>
I want to achieve the following:
HTML is responsive - product width is always 25% of the screen
img display as a square
img keep aspect ratio
img not croped
img is centered to the middle of the square
I can achieve it with JS, see https://jsfiddle.net/eliaweiss/fs7jv4o7/2/
$(document).ready(function() {
product_width = $(".prod").width();
$(".prod").each(function(i, o) {
prod = $(o);
prod.width(product_width);
prod.height(product_width);
})
$(".prod img").each(function(i, o) {
img = $(o);
w = img.width() - 1;
h = img.height() - 1;
//console.log("w="+w+", h="+h);
if ( w == h) return;
if (h < w) {
margin = (w - h)/2;
img.css("margin-top", margin);
img.css("margin-bottom", margin);
}
if (w < h) {
img.height();
img.width(w*w/h); // keep ratio
h = w*w/h;
margin = (w - h)/2;
img.css("margin-left", margin);
img.css("margin-right", margin);
}
})
})
.prod {
width: 21%;
float: left;
border: 1px solid black;
padding: 2px;
}
img {
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
<div class="prod">
<img src="https://esoterica-shop.com/634-home_default/-Brown-Ethnic-Earrings-with-AquaMarine-Crystal-And-k-gold-filled-Boho-Chic-TRIBAL-Jewelry-Macram-Gypsy-Belly-Dance-Earring.jpg" alt="">
</div>
<div class="prod">
<img src="https://esoterica-shop.com/641-home_default/-Tribal-earrings-Brown-Tribal-earrings-Macrame-earrings-Red-wine-Boho-earrings-e-Bohemian-earrings-Indian-earrings-Lotus.jpg" alt="">
</div>
<div class="prod">
<img src="https://esoterica-shop.com/644-home_default/-Sale-tribal-earrings-Green-gold-and-white-pearl-hoops-micro-macrame-hippie-earrings-boho-tribal-earrings-gypsy-earrings.jpg" alt="">
</div>
<div class="prod">
<img src="https://esoterica-shop.com/679-home_default/-Sale-tribal-earrings-Silver-and-Red-Classic-macrame-Earrings-with-delicate-GARNET-gemstone-TRIBAL-jewelry-bohemian-gypsy-jewel.jpg" alt="">
</div>
<div class="prod">
<img src="https://esoterica-shop.com/634-home_default/-Brown-Ethnic-Earrings-with-AquaMarine-Crystal-And-k-gold-filled-Boho-Chic-TRIBAL-Jewelry-Macram-Gypsy-Belly-Dance-Earring.jpg" alt="">
</div>
<div class="prod">
<img src="https://esoterica-shop.com/641-home_default/-Tribal-earrings-Brown-Tribal-earrings-Macrame-earrings-Red-wine-Boho-earrings-e-Bohemian-earrings-Indian-earrings-Lotus.jpg" alt="">
</div>
<div class="prod">
<img src="https://esoterica-shop.com/679-home_default/-Sale-tribal-earrings-Silver-and-Red-Classic-macrame-Earrings-with-delicate-GARNET-gemstone-TRIBAL-jewelry-bohemian-gypsy-jewel.jpg" alt="">
</div>
<div class="prod">
<img src="https://esoterica-shop.com/644-home_default/-Sale-tribal-earrings-Green-gold-and-white-pearl-hoops-micro-macrame-hippie-earrings-boho-tribal-earrings-gypsy-earrings.jpg" alt="">
</div>
</div>
But I want to know if it's somehow possible to achieve with css

Here is a partial answer with css flex
https://jsfiddle.net/eliaweiss/otLcf1kn/1/
* {box-sizing:border-box;margin:0;padding:0;}
.list {
display: flex;
flex-wrap: wrap;
}
.prod {
width: 25%;
border: 1px solid black;
padding: 2px;
display: flex;
align-items: center;
justify-content: center;
}
img {
max-width: 100%;
}
<div class="list">
<div class="prod">
<img src="https://esoterica-shop.com/634-home_default/-Brown-Ethnic-Earrings-with-AquaMarine-Crystal-And-k-gold-filled-Boho-Chic-TRIBAL-Jewelry-Macram-Gypsy-Belly-Dance-Earring.jpg" alt="">
</div>
<div class="prod">
<img src="https://esoterica-shop.com/641-home_default/-Tribal-earrings-Brown-Tribal-earrings-Macrame-earrings-Red-wine-Boho-earrings-e-Bohemian-earrings-Indian-earrings-Lotus.jpg" alt="">
</div>
<div class="prod">
<img src="https://esoterica-shop.com/644-home_default/-Sale-tribal-earrings-Green-gold-and-white-pearl-hoops-micro-macrame-hippie-earrings-boho-tribal-earrings-gypsy-earrings.jpg" alt="">
</div>
<div class="prod">
<img src="https://esoterica-shop.com/679-home_default/-Sale-tribal-earrings-Silver-and-Red-Classic-macrame-Earrings-with-delicate-GARNET-gemstone-TRIBAL-jewelry-bohemian-gypsy-jewel.jpg" alt="">
</div>
<div class="prod">
<img src="https://esoterica-shop.com/634-home_default/-Brown-Ethnic-Earrings-with-AquaMarine-Crystal-And-k-gold-filled-Boho-Chic-TRIBAL-Jewelry-Macram-Gypsy-Belly-Dance-Earring.jpg" alt="">
</div>
<div class="prod">
<img src="https://esoterica-shop.com/641-home_default/-Tribal-earrings-Brown-Tribal-earrings-Macrame-earrings-Red-wine-Boho-earrings-e-Bohemian-earrings-Indian-earrings-Lotus.jpg" alt="">
</div>
<div class="prod">
<img src="https://esoterica-shop.com/679-home_default/-Sale-tribal-earrings-Silver-and-Red-Classic-macrame-Earrings-with-delicate-GARNET-gemstone-TRIBAL-jewelry-bohemian-gypsy-jewel.jpg" alt="">
</div>
<div class="prod">
<img src="https://esoterica-shop.com/644-home_default/-Sale-tribal-earrings-Green-gold-and-white-pearl-hoops-micro-macrame-hippie-earrings-boho-tribal-earrings-gypsy-earrings.jpg" alt="">
</div>
</div>
This is good enough for most cases, however it generate a rectangle shape instead of a square