A repeating group is a container used to display a list of items, such as records from your database. It works by repeating the same set of elements once for each item in the list, making it easy to build lists, grids, and card layouts without writing code.

Repeating groups are one of the most powerful tools in Bubble. Almost any interface that shows more than one thing at a time, from feeds to product catalogs to search results, is built using them.

At the most basic level, a repeating group takes a list of things and repeats its child elements once for each item. For example, if you show a list of five blog posts, everything you add to the repeating group is duplicated five times, once per post.

Each of these repetitions is called a cell. A cell holds all the child elements and represents a single item from the list. Text elements can display data from that item, buttons can trigger actions on it, and containers can be styled to give each cell its own look.

Repeating groups work similarly to regular groups: you set a Type of content, provide a Data source, and the elements inside can reference the data. The difference is that a regular group holds one item, while a repeating group holds many.

Because each cell represents a different item in the list, referencing data inside a cell uses the Current cell expression. If the Type of content is Post, you'd reference Current cell's Post's Title to show the post's title.

This pattern lets Bubble automatically insert the right data into each cell without you having to configure them individually. One text element inside the repeating group displays all the names in the list, one per cell.

Repeating groups are flexible enough to build almost any list-based interface. Here are three of the most common patterns.

The most basic use of a repeating group is a straightforward list, such as a contact list, a task list, or a search result list. Each cell displays a few pieces of information, usually as text.

To build one:

The result is a clean list that updates automatically when the underlying data changes.

The same repeating group can be used to display richer content, like product cards or dashboard tiles.

To build a card layout, place a regular group inside the cell of the repeating group. Style that inner group with a background color, border radius, and shadow to give it the look of a card. Inside the card, add elements like images, text, and buttons.

Each element inside the card references its parent group's data (the current item), and the parent group references the current cell of the repeating group. This lets you design complex, styled cards that populate automatically for each item in the list.

For example, a product catalog might use cards that show a product image, name, price, and an Add to cart button, all inside a single card group that repeats once per product.

Repeating groups can also display items in a masonry layout, where cells have varying heights and pack together automatically. This is useful for image galleries, blog previews, or any content where items naturally have different sizes.

To set up a masonry layout:

You can control the spacing between cells using the Row cell gap and Column cell gap settings.

There are two main ways to load data into a repeating group:

Repeating groups require a list as their data source, unlike most other containers, which work with a single item.

The list loads as soon as the page loads, using an expression like Do a search for Users. This is useful when the data is known in advance.

Use the Display list in a repeating group or table action to load a list in response to a user action, such as clicking a filter or performing a search. This is useful when the data depends on something the user does.

Repeating groups give you a lot of flexibility in how they arrange and display their cells. By combining a few key properties, you can build everything from short, contained lists to long, infinite feeds and horizontally scrolling carousels.

The main levers to play with are:

The way you combine these determines the character of the list.

Setting Rows to Fit to content makes the repeating group grow to show every row it contains, with no internal scrolling. The page itself scrolls if the list is long enough to run off the screen. This works well for lists where you want the entire list visible at once, or where the surrounding page layout should adjust to the size of the list.

Setting Rows to Fill container makes the repeating group take up all the vertical space available inside its parent, and adds internal scrolling when the list is longer than the visible area. This is useful when the repeating group sits inside a fixed-height section, like a sidebar or a card, and you want the list to scroll within that space without affecting the rest of the page.

Setting Rows to Fixed number shows a specific number of rows at a time, regardless of how many items are in the list. This is the foundation for paginated interfaces, where users click through pages of results. The Show next, Show previous, and Go to page actions let you build controls that navigate between pages.

The Columns setting controls how many cells sit side by side in each row. Combining a multi-column layout with Fit to content is a common pattern for grid-based designs, like a product catalog or an image gallery. Combining columns with Fill container creates a grid that fills the available space and scrolls internally.

Setting Scroll direction to Horizontal turns the repeating group into a row that scrolls sideways. This works well for carousels, thumbnail rows, and featured content sections. Horizontal repeating groups typically use a single row with multiple columns, and their width is limited by the parent container.

Enabling Display items as masonry grid creates a packed grid where cells have varying heights and fit together automatically. This is ideal for image galleries, blog previews, or any layout where content naturally comes in different sizes. Masonry layouts require the responsive engine and work only with vertical scrolling.

Most real-world designs come from combining these settings in specific ways:

Experimenting with these combinations is the fastest way to get a feel for what each setting does.