Create Grid View Using Gallery Control in Power Apps

Introduction

Power Apps provides Gallery Controls that allow users to display multiple records from a data source. By default, galleries display records in a vertical or horizontal layout. However, many business applications require a Grid View to display data in a more organized and visually appealing format.

What is a Grid View?

A Grid View displays records in multiple columns and rows rather than a simple vertical list. Benefits include: Better space utilization, Improved user experience, Modern application design, Easy navigation, and Responsive layouts.

Example:

Employee1 Employee2 Employee3
Employee4 Employee5 Employee6

Prerequisites

Before starting, ensure you have: Power Apps Canvas App, Data Source (SharePoint, Dataverse, SQL, Collection), Gallery Control, and Basic Power Apps knowledge.

Step 1: Connect Your Data Source

Connect your data source. Example: Employees Sample Data: John IT, Sarah HR, David Finance, Emily Marketing

Step 2: Insert a Blank Vertical Gallery

Navigate to: Insert → Gallery → Blank Vertical Gallery Rename it: galEmployees Set the Items property: Employees

Step 3: Configure Wrap Count

To convert the gallery into a grid layout, set the Wrap Count property. Example: 3 Columns Per Row Formula: galEmployees.WrapCount=3

Step 4: Adjust Template Size

Set the gallery's Template Size property: 180 Example: galEmployees.TemplateSize=180 This controls the height of each grid card.

Step 5: Add Controls Inside Gallery

Insert: Image Control, Label for Name, Label for Department Employee Name: ThisItem.'EmployeeName' Department: ThisItem.Department Image: ThisItem.Photo

Step 6: Create Card Layout

Inside each gallery item: Image: Width=100 Height=100 Name Label: Align.Center Department Label: Align.Center This creates a card-styled design.

Step 7: Add Responsive Grid Layout

To automatically adjust columns based on screen size: Wrap Count: If(App.Width>1200, 4, If(App.Width>800, 3, 2)) Benefits: Desktop=4 Columns, Tablet=3 Columns, Mobile=2 Columns

Step 8: Add Search Functionality

Insert a TextInput: txtSearch Gallery Items: Filter(Employees, StartsWith('EmployeeName', txtSearch.Text)) The grid updates dynamically based on the search value.

Complete Gallery Formula

Items Property: Filter(Employees, StartsWith('EmployeeName', txtSearch.Text)) Wrap Count: If(App.Width>1200, 4, If(App.Width>800, 3, 2)) Template Size: 180

Real-Time Example

Suppose you're building a Product Catalog. Data Source: Product Price Laptop 50000 Mouse 1000 Keyboard 2000 Grid View Displays: Product Image Product Name Price Status Users can browse products more efficiently than using a traditional list view.

Benefits of Grid View

Better Visual Layout Displays records neatly in rows and columns. Improved User Experience Makes navigation easier. Mobile Friendly Supports responsive layouts. Professional Appearance Creates modern application designs. Efficient Space Usage Displays more records within the same screen area.

Best Practices

• Use Responsive Wrap Count Adjust grid columns based on screen size.
• Optimize Images Use compressed images for better performance.
• Limit Data Loading Apply filters whenever possible.
• Maintain Consistent Card Sizes Keep layouts clean and aligned.
• Use Search and Filters Improve usability for large datasets.

Common Use Cases

• Employee Directory Display employee profiles.
• Product Catalog Show products in card layouts.
• Inventory Management Display inventory items.
• Asset Tracking Show equipment records visually.
• Customer Portals Display customer information in grids.

Troubleshooting

• Grid Not Displaying Multiple Columns Verify Wrap Count is greater than 1.
• Cards Overlapping Increase gallery width or reduce Template Size.
• Images Not Showing Verify image URLs and permissions.
• Slow Performance Limit records and optimize image sizes.

Conclusion

Creating a Grid View using Gallery Control in Power Apps is an excellent way to improve the visual appearance and usability of your applications. By configuring Wrap Count, Template Size, and responsive layouts, you can display records in an organized grid structure that works across desktop, tablet, and mobile devices.