Css grid like Pinterest for dynamic pictures on react [duplicate] - css

Question

This question already has answers here:
CSS-only masonry layout
(4 answers)
Closed 4 days ago.
So im trying to use css grid to make a gallery for pictures liek pinterest. So diffrent height pictures to be next to each other and each picutre to take over the empty space. But all the examples i see are with adding diffrent classes on each picture depending on their height they want and i want to add pictures dynamically from a data base.
I tried like this:
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;
}
But like this the small picutres are in the same row and the bigger picutres in another when i need it to be randomised.
Is there any way to do it without adding different classes om each picture?

Answer 1

Pinterst uses a vertical alignment. So if you want to replicate it you should create vertical boxes next to each other with fixed width.
And show as many rows as the screen lets you. (If you resize the pinterest windiow width, the whole page gets regenerated, but that is outside the sope of your question I guess)
So I recomment using divs or even a table with one row and a long column.
<table>
<tr>
<td>images</td>
<td>images</td>
<td>images</td>
</tr>
</table>
of course dynamically. (I created a 3 long row for a smaller screen)
And from here you add the images to each column, setting the tr width to like 200px and the image width to 100%.

Answer 2

Ok i found the answer here in case someone else needs it:
https://css-tricks.com/seamless-responsive-photo-grid/