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

Oldest comments (5)

Collapse
 
theplebdev profile image
Tristan
Collapse
 
zakiazfar profile image
zakiAzfar

it is not for masonry layout

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