
This tutorial walks through recreating Apple’s Liquid Glass UI on the web using SVG filters, CSS, and React. You’ll learn how to build refraction and reflection effects with custom displacement and specular maps, and how to balance performance and accessibility when using advanced filter pipelines.

tRPC solved type safety for full-stack TypeScript teams. oRPC borrowed the best parts and added interoperability. This article breaks down how both frameworks work and where each one fits best.

Check out Google’s latest AI releases, Gemini and the Antigravity AI IDE. Understand what’s new, how they work, and how they can reshape your development workflow.

Learn about Bun 1.3, which marks a shift from fast runtime to full JS toolchain—and see the impact of Anthropic’s acquisition of Bun.
Would you be interested in joining LogRocket's developer community?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up now
2 Replies to "Create responsive masonry layouts for your React app"
Hello! Thank you for the explanation. I’m trying to reproduce the masonry with some images, but some columns are way higher than others due to some vertical images together. I thought the example would work to ‘reorder’ those in order to accommodate these different heights and maintain a balanced view, as it is said on the post, but I can’t get it to work.
Any advice? Thank you!
Similar to other poster, I tried using react-responsive-masonry and Measure together exactly as is done in the example, and nothing happens when an item is resized. masonry is not triggered, and the columns don’t adjust. Is there more to it? a callback function that needs to be passed so masonry knows to re-render?