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

Oldest comments (5)

theplebdev profile image
zakiazfar profile image

it is not for masonry layout

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.

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

dylancazaly profile image
dylan cazaly

If you're seeking guidance on implementing a masonry layout in React, fear not! Crafting a dynamic and visually appealing grid system akin to a brick wall is within reach. Utilizing libraries like Masonry.js or CSS Grid can streamline the process, allowing for seamless arrangement of content blocks regardless of their varied heights. Integrating these tools into your React project ensures a responsive and polished layout that captivates users. Whether you're showcasing portfolios, product displays, or blog posts, mastering masonry layout techniques elevates the presentation of your content. Need assistance? Look no further than tutorials, forums, or even reaching out to professionals like the WNY roofing company, who excel in precision and structure, mirroring the finesse needed for a well-constructed masonry layout in your React application.