The Pega 7 UI Gallery provides repeating grid and repeating dynamic layouts. These layouts help in displaying content in a grid or in a dynamic section.

The following sections explain these layouts in more detail:

• Repeating grid layouts
• Repeating dynamic layouts

Repeating grid layouts

The repeating grid layout is useful for presenting linear content (such as a report), regardless of the screen size. Users must scroll to view the complete content.

A repeating grid typically contains a certain set of elements that are displayed repeatedly based on a condition or a rule.

An example of a repeating grid layout

Creating a page with a repeating grid layout

1. Click Application Explorer and expand the application tree.
2. Expand User Interface and click Section.
3. Click Createto add a new section.
4. On the Design tab, select expand Layout.
   
5. Drag Layout to the design area.
6. Select Grid as the layout type.
   ​
7. Click the Gear icon to open the layout properties.
   ​
8. Set the Source, Applies To, Report definition, and other properties, and then click Submit.
   

Repeating dynamic layouts

The repeating dynamic layout is useful when you want to present content that is in nonlinear format. It automatically adjusts the layout elements with respect to the screen size. This layout helps developers when creating an interface for displaying data that can be viewed on a tablet, monitor, or smartphone.

An example of a repeating dynamic layout

Creating a page with a repeating dynamic layout

1. Click Application Explorer and expand the application tree.
2. Expand User Interface and click Section.
3. Click Create to add a new section.
4. On the Design tab, expand Layout.
   
5. Drag Layout to the design area.
6. Select Repeating Layout as the layout type.
   
7. Drag Section to the repeating dynamic layout.
   
8. Click the Gear icon for the section and set the section source to any data source (page list or data page), and click OK.