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

Headshots of previous Bubble Ambassadors surrounding text that reads "BAM applications now open"

Want to Shape the Future of No-Code? Become a 2026 Bubble Ambassador

Want to help shape the future of app building? We’re seeking passionate builders join cohort four of our Ambassador Program.

Federico Garcia Lorca
September 16, 2026 • 2 minute read
A mobile app being converted into a web app with similar but mobile-first layouts.

How to Turn Your Web App Into a Mobile App (Complete 2026 Guide)

Learn how to convert your existing web app into a native mobile app with Bubble Mobile, from planning and setup to launching on iOS and Android app stores.

Bubble
September 16, 2026 • 18 minute read
How To Build an Appointment Booking App on Bubble

How To Build an Appointment Booking App on Bubble

Build an appointment booking app with the exact branding, workflows, and payment rules you want. This guide walks you through building it on Bubble, from setup to a live app on web and native mobile.

Bubble
September 15, 2026 • 11 minute read
How To Build an E-Commerce App With Bubble

How To Build an E-Commerce App With Bubble

Building an e-commerce app means creating software that lets customers browse products, add items to a cart, check out, and pay. You'll need a backend database for product and order information, logic to handle cart updates and payments, and a way to deploy the finished app so customers can use it.

Bubble
September 15, 2026 • 14 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