Grid container control in Power Apps

The Grid container control gives you a way to layout child components in a grid pattern. You get precise control over where each component goes in terms of rows and columns.

This container works like CSS-style grids. You define the rows and columns and set the exact position for each child component using its properties.

Description

The Grid container control offers a flexible layout system for canvas apps. It enables you to:

• Place child components in a grid pattern
• Specify the row and column start and end for each child
• Make responsive adjustments when the container or screen size changes
• Control alignment, spacing, and overflow within the grid

By using this approach, you don't need to manually position each component. Your apps become more maintainable and responsive.

Display properties

• Gap – The spacing in pixels between child components inside the grid.
• Columns – The number of columns in the grid layout.
• Rows – The number of rows in the grid layout.

Size and position

• X – The horizontal distance from the left edge of the parent container (or screen if no parent).
• Y – The vertical distance from the top edge of the parent container (or screen if no parent).
• Width – The distance between a control's left and right edges.
• Height – The distance between a control's top and bottom edges.
• Padding - The spacing between the container edges and its child components.

Color and border

• Color – Foreground color of the container, used for borders and text if applicable.
• Border
  • Style – Type of border: Solid, Dashed, Dotted, or None.
  • Thickness – Width of the border in pixels.
  • Color – Color of the border.
• Border radius – The degree to which the corners of the container are rounded. You can apply this setting to all corners uniformly or split it into individual corners in advanced settings.
• Drop shadow – Shadow effect applied to the container. Options: None, Light, Medium, or Heavy.

Visibility

• Visible – Whether the grid container is displayed. Toggle On or Off.

Grid layout properties (child-specific)

• Column Start / Column End – Defines the starting and ending columns for a child component.
• Row Start / Row End – Defines the starting and ending rows for a child component.

Example

1. Create a blank canvas app from scratch with a Responsive layout.

2. Create a new screen.

3. From the Insert pane under Layout, select Grid container.

4. Set container properties to occupy the full screen:

   • X = 0
   • Y = 0
   • Width = Parent.Width
   • Height = Parent.Height

5. Add several child components, such as buttons, text inputs, icons, and media. For each child, set grid placement properties:

   • Column Start / End
   • Row Start / End
   • Align in Cell

6. Press F5 to preview. Resize the screen and observe how child components remain in their grid positions and adjust responsively.