Question 74228 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Css grid like Pinterest for dynamic pictures on react – Reactjs

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?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

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

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


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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search