PowerGrid is a Canvas Component that simplifies designing Power Apps to a responsive layout grid (as used with SharePoint or in Material Design). While this isn't a fully automatic layout like the Canvas Layout Container, it does allow you to more easily make your app identify and respond to specified pixel width breakpoints, and manage control placement according to a grid layout. An example of this is below, where the contents are aligned to a column layout, until the window is resized below the "small" breakpoint, where the image shrinks and the body text moves to consume the full width (click for a more in depth demo):
To use PowerGrid, import the solution and reference the component library. Then, add the PowerGrid component to your app, setting the PowerGrid width and height properties to App.Width and App.Height, respectively.
PowerGrid has these input properties:
| Name | Type | Description |
|---|---|---|
| Fill Color | Color | Color of the grids (when visible) |
| Inner Padding | Number | Distance between columns (pixels) |
| Gutter | Number | Distance between edges of container and columns (pixels) |
| Show Columns | Boolean | Toggles column visibility |
| Breakpoints | Table | Table of pixel breakpoints and labels (see example below) |
The default breakpoints are set as below:
Table({Size:840, Label: "small"},{Size:1024, Label: "medium"},{Size:1440, Label: "large"},{Size:1920, Label: "xlarge"})
PowerGrid has these Output properties:
| Name | Type | Description |
|---|---|---|
| Breakpoint | Record | The current breakpoint (both Size and Label) |
| Layout | Record | The column and control layout values |
Example PowerGrid.Layout properties:
PowerGrid.Layout.Column1.Left: the leftmost edge of column 1
PowerGrid.Layout.Column3.Right: pixel position of the rightmost edge of column 3
PowerGrid.Top: the pixel position of the grid top (actual column location factoring in gutter)
PowerGrid.Height: the pixel height of the columns