CodeNewbie Community 🌱

zakiAzfar
zakiAzfar

Posted on

Help! How to make masonry layout in react

Hey there, I am making a react photo gallery app in which I am consuming UNSPLASH API, but I am not able to make a masonry layout in my app.

I have found many techniques to make masonry layouts, but none of them satisfy my needs.

#1 CSS column layout technique
CSS_ERR

problem :: It is mixing previous and newly added photos, and IDK why?

#2 using react-masonry-css
image
problem :: bottom layout is broken

#3 using react-responsive-masonry
problem :: same as #2 bottom layout is broken

#4 using react-photo-gallery
problem :: no support for using next/image and blurhash

#4 using StackGrid
problem :: no support for infinite loading and it is too slow

Top comments (4)

Collapse
 
larrymartin1job profile image
Larry Martin

Consider using a library like react masonry css for achieving a responsive masonry layout effortlessly. Its easy to implement and offers customizable options streamlining your gallery layout design within your React app.
Roofing Installation Services in San Clemente CA

Collapse
 
rubynolte profile image
RubyNolte • Edited

I appreciate your input on this. I deal with pictures and videos all the time. And stock materials are now essential for this. For instance, I was able to get korea flag photos I required for my presentation. Thanks to this source there are so many excellent ones available.

Collapse
 
theplebdev profile image
Tristan
Collapse
 
zakiazfar profile image
zakiAzfar

it is not for masonry layout