I am attempting to use CSS grid to create a gallery for images, similar to Pinterest. I want pictures of different heights to be placed next to each other and fill the empty space. However, all the examples I have seen involve adding different classes to each picture based on their desired height. I want to dynamically add pictures from a database.
This is how I approached it: My gallery component:
<div className=‘gallery’>
<img className=‘image’> </img>
<img className=‘image’> </img>
<img className=‘image’> </img>
<img className=‘image’> </img>
</div>
And my CSS file:
.gallery{
max-width: 80vh;
display: grid;
grid-template-columns:repeat(3,1fr);
}
.image{
max-width: 200px;
height: 100%;
object-fit: cover;
}
With this setup, the smaller pictures are in one row and the larger pictures in another, but I need them to be randomized.
Is there a way to achieve this without assigning different classes to each picture?