1

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?

Paulie_D
  • 107,962
  • 13
  • 142
  • 161
user2323
  • 13
  • 3

2 Answers2

0

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%.

TMarciDev
  • 73
  • 6
  • Thank you so much for your answer! The only problem is that i want the pictures to take the empty space of the smaller pictures so it wont be a gap between them when a picture has more height than another. And the td is a fixed height – user2323 Feb 16 '23 at 14:44
  • I found the answer here but thank you anyway!! https://css-tricks.com/seamless-responsive-photo-grid/ – user2323 Feb 16 '23 at 14:58
0

Ok i found the answer here in case someone else needs it:

https://css-tricks.com/seamless-responsive-photo-grid/

user2323
  • 13
  • 3