CodeNewbie Community 🌱


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

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

#2 using react-masonry-css
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

Latest comments (4)

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

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.

theplebdev profile image
zakiazfar profile image

it is not for masonry layout