#CanvasApp - Using Horizontal Container to create a similar layout with the bootstrap grid system

PowerApps has released container controls to make developers create responsive layout easily in Canvas App . You can find out more here: https://powerapps.microsoft.com/en-us/blog/new-layout-containers-in-canvas-apps-make-responsive-apps-easier/

So today I'm gonna show you how to use Horizontal container to create a grid system just similar to bootstrap. Let's have a quick look at my sample app below

But first, what can we do with Horizontal container? All items inside the container can be ordered horizontally. You cannot control child items position by X and Y properties

Now we will design our grid system layout. First, we need to set up some variables in App-OnStart event

Set(vGridSystemColumn, 8); // grid system with 8 columns
Set(vGap, 5);              // Padding of each child item
// Set Min Width for each child item                                          
Set(vMinWith, App.Width/vGridSystemColumn - (vGridSystemColumn - 1)*vGap)

Create a Horizontal Container with properties

LayoutGap  = vGap
LayoutWrap = true // if the child item exceed the layout width (container doesn't have scrollbar), it will be moved to the next line
Width = Parent.Width
Height = Parent.Height (or your custom value)

For each child item we should edit these properties

FillPortions    = 1 // We will change this value later
LayoutMinWidth  = vMinWith

If the item occupies more than 1 column, we can edit property FillPortions with the value between 1-8

If you need an offset column, just add an empty label and make it transparent (Fill = RGBA(0, 0, 0, 0))

After each row, we need to add line break by inserting a Rectangle with Height = 0 and Width = Parent.Width

**NOTICE: to make sure the layout is not broken, please be aware of these things:

• Don't set Visible = False to any child item. That will break the layout
• Summarize FillPortions of all items for each row. The total must be equal to 8 (or vGridSystemColumn)
• Remember to add a line break after each row