How to create a left aligned responsive gallery

Introduction

Responsiveness is a key feature of any app and there are many ways a maker can implement a responsive gallery. One of the sample apps I created for Microsoft Teams is Profile+ (code can be found here). It is an app that shows organization structure for a selected user and also shows the list of team members in a team. We will use the team members view to illustrate how to build a left-aligned gallery.

Responsive left aligned gallery

For a gallery to be responsive, the idea is to have a dynamic wrap count. As the screen goes wider, the wrap count should increase. Following these steps to achieve a left-aligned gallery:

1. Set the TemplateSize to a fixed value. We will use 120 in this example. Also, set a label or a button inside the gallery and set its width to 120 (can be any number you want), This is the number that will be referenced below.
2. Set the Wrap Count of the gallery to the following code:

   If(
       CountRows(Self.AllItems) * (120 + 20) < (Parent.Width - 500),
       CountRows(Self.AllItems),
       RoundDown(
           (Parent.Width - 20) / (120 + 20),
           0
       )
   )

   Parent.Width - 20 is just the gap from the border of the screen that I want to use

3. Set the Width of the gallery to the following code:

   If(
       CountRows(Self.AllItems) > RoundDown(
           (Parent.Width - 20) / (120 + 20),
           0
       ),
       RoundDown(
           (Parent.Width - 20) / (120 + 20),
           0
       ) * (120 + 20),
       CountRows(Self.AllItems) * (120 + 20)
   )

4. Set the X property of the gallery to the following code:

   10

Here is a demo of a responsive left aligned gallery:

Here is a demo of the Profile+ app:

Recent articles

1. How to create a center aligned responsive gallery?
2. Want to track your fitness goals using an app?
3. How to reset the people picker control?