A new feature in Power Apps designed to simplify the creation of responsive layouts. Unlike traditional vertical and horizontal containers, this tool allows makers to arrange elements within a defined structure of rows and columns.

The primary purpose of the grid container control is to support responsive design in canvas Power Apps. It allows developers to hold a set of controls that are automatically laid out in a grid-like pattern of defined rows and columns.

Pro Tip: To use the Grid Container, you'll need to ensure your app's authoring version is set to the correct version or higher. You can check this in Settings > Support.

To enable the new grid container, a user must go into the Power Apps maker portal settings, navigate to support, and ensure the authoring version is set to the required version or a more recent one. This makes new features, including the grid container, available.
1. You Can Now Preview Responsiveness Without Leaving the Editor

Traditionally, testing the responsive behavior of a canvas app has been a multi-step process. You had to save your changes, play the app, and then manually select different screen size options to see how your UI would adapt. This constant back-and-forth between the editor and preview mode slowed down development and made iterative design adjustments tedious.

The Grid Container introduces a massively improved workflow. Now, you can see how your layout responds to different screen sizes directly within the Canvas App designer. By simply selecting options like Large, Medium, or Small from the editor's toolbar, you can get immediate, real-time visual feedback on how the grid and its contents adjust. This feature dramatically speeds up the development cycle, allowing for faster and more confident design decisions.

"For testing responsive design we had to play the app and then pick the different options to view it in different screen sizes. That is still supported. But apart from that right here while designing the app itself I can pick different screen sizes large medium You can see how the grid is adjusting the sizing Small..."

When the grid container's dimensions change, the x position, y position, width, and height of the controls within it automatically transform themselves to fit the new layout. This automatic adjustment is a key feature for building responsive applications.

2. It Flattens Complexity and Reduces Container Nesting

One of the most significant advantages of the Grid Container is its ability to create complex layouts with a much simpler structure.

Nesting refers to placing containers within other containers. In the home screen example, a main grid container was created, and then four separate vertical containers were placed, or nested, inside the grid to create individual card-like elements, each holding an image and a button.

With the Grid Container, this becomes incredibly simple. You can define a 2x2 grid and then place four individual vertical containers—each acting as a "card" holding an image and a button—directly into the grid cells.

The Grid Container handles the entire layout, creating a sophisticated, responsive dashboard with a flat and easy-to-manage control tree. This same principle applies to building multi-column forms, allowing you to place all your labels and input fields into a single grid instead of creating a container for every row. This flattened structure not only results in a cleaner app architecture but also contributes to better performance and maintainability.

"Notice there's not much nesting of containers here."

3. You Get Pinpoint Control Over Each Item's Position

While the Grid Container excels at automatically arranging controls, it is far more than just a simple auto-layout tool. It also provides granular control over the precise placement of every item within it. For each control you add to the grid, you can manually define its starting row and column.

For example, when building a Three-column form, you can create a perfectly aligned layout by assigning specific coordinates:

The rows and columns properties define the structure of the grid. Columns sets the number of vertical divisions, and rows sets the number of horizontal divisions, which dictates how many controls can be displayed and how they are arranged within the container.

The gap property defines the spacing, in pixels, between the individual controls housed within the grid container. The padding property defines the spacing between the outer edge of the controls and the inner border of the grid container itself.

Newer method allows developers to test responsiveness directly within the design canvas by selecting different screen sizes like large, medium, and small without having to play the app.

Conclusion: A New Foundation for App Design

The new Grid Container is more than just another control; it's a fundamental enhancement to how we can approach responsive design in Power Apps. By allowing in-editor previews, simplifying complex layouts, and providing pinpoint positional control, it solves some of the most common challenges developers face.

It's important to remember that the Grid Container is a complementary tool that works alongside existing horizontal and vertical containers, not a replacement for them. It adds a powerful new dimension to your responsive design toolkit.

The Power Apps Grid Container