Walk-Through: Create a Masonry Layout Using Repeating Groups

Learn how to use repeating groups to create a masonry layout in this interactive walk-through.

Abhinav Narain
December 18, 2023 • A quick read
A mockup of a masonry layout in a window on a magenta background.

Did you know there’s a name for the photo layout on Pinterest? A masonry layout is when objects of different sizes are displayed in a grid with varying heights. This is particularly useful when you want to display something like photos without making them all the same size. The result is a display that's laid out like bricks on a path — hence the name! 

Creating a masonry layout on Bubble is an easy way to add visual appeal to your app. Here’s a quick step-by-step guide to using repeating groups to display your app data in a masonry layout: 

💡
For more interactive tutorials, visit the academy.
Start building for free

Build for as long as you want on the Free plan. Only upgrade when you're ready to launch.

Join Bubble

LATEST STORIES

Bubble vs. Lovable Comparison: Which AI App Builder is Right for You?

Bubble vs. Lovable Comparison: Which AI App Builder is Right for You?

Find the right no-code AI app builder for your project with our in-depth comparison of Bubble vs. Lovable, including app output, iteration quality, customization tools, technical experience needed, and more.

Bubble
September 30, 2026 • 22 minute read
Bubble vs. Webflow: Comparing the Top No-Code Platforms

Bubble vs. Webflow: Comparing the Top No-Code Platforms

Bubble is a full-stack, visual programming tool for building web and mobile apps, while Webflow is built for designing and publishing websites. Here's how to decide which is right for your project.

Bubble
September 30, 2026 • 19 minute read
No-Code AI Agent Builder: What You Can Build on Bubble

No-Code AI Agent Builder: What You Can Build on Bubble

With no-code AI agent builders you can build AI-powered agents that take actions automatically and work across websites, web apps, and mobile apps.

Bubble
September 28, 2026 • 11 minute read
Bubble livestream promo: Demo Day + AMA with Emmanuel Straschnov, September 24, 2026, 11 AM ET, with headshot and Bubble logo

September Demos and AMA: MCP, Conversational Generation, and Launch Lab's Winners

September demos were all about flexibility and control. Emmanuel showed an early look at MCP and a more conversational way to build, then answered community questions and announced Launch Lab's winners.

Emmanuel Straschnov
September 25, 2026 • 9 minute read

What Can You Build on Bubble? 25 Examples to Inspire You

September 08, 2026 • 13 minute read

The Easiest Way to Build a Custom CRM With AI

September 01, 2026 • 17 minute read

What Is Bubble AI and How Does It Build Apps?

August 19, 2026 • 8 minute read

See How We Redesigned the Property Editor for Better Building

December 11, 2025 • 4 minute read

The Future of Bubble’s Editor: Introducing the New Workflow Tab

October 11, 2024 • 3 minute read

Build the next big thing with Bubble

Start building for free