OpenTube

This New Power Apps Grid Container Changes Everything 🔥 (Responsive Design in Canvas Apps)

Reza Dorrani

40,870 views

The new Grid Container in Power Apps Canvas Apps is a big step forward for building modern, responsive layouts.
In this video, I explore the new Power Apps Grid Container and show how it changes the way we design responsive screens without relying entirely on X and Y positioning. We’ll build real-world examples and walk through how Grid Container properties — rows, columns, gap, grid position, and more — work in practice.

🔥 What you’ll learn:
• What the Grid Container is and why it matters
• Grid Container properties: rows, columns, and more
• How to design responsive layouts in Power Apps
• How Grid Containers complement existing responsive containers (horizontal and vertical)

We’ll build:
✅ A modern Home screen using Grid Containers
✅ A Customer Profile form screen with grid-based layouts
✅ Responsive layouts that stay aligned when the screen resizes

This video is perfect for:
✔ Power Apps beginners
✔ Canvas app builders
✔ Anyone tired of managing X & Y values
✔ Developers building responsive business apps

👇 Let me know in the comments:
What do you think about the NEW Grid Container?

Note: The Grid Container is still new. I’m actively learning it myself, and while it’s powerful, it doesn’t solve every layout scenario perfectly — some designs still require a combination of different container types to work well.

#PowerApps #GridContainer #CanvasApps #ResponsiveDesign #powerplatform

⏱️ Chapters
0:00 Introduction to New Power Apps Grid Container Control for Responsive Design
0:30 Build Canvas Power Apps with Grid container
1:12 Learn all about the Grid Container
4:11 Use the Grid Container to build a responsive power apps home screen
8:15 Use the Grid Container to build a responsive power apps form screen

20 Comments

@claudenguyen9001 9 months ago Pinned

Thank you for this video! I know AI/vibe coding/agentics are part of the future, but these videos on canvas apps are still what gives me the most joy

@flightmode7655 9 months ago

ah this is much nicer for designing custom form screens. thx for this one Reza. awesome as usual.

@YARLAGADDASESHAGIRI-hv1tw 9 months ago

Thanks, Reza! You always share the best videos. 👍

@lxz86 9 months ago

Using a grid container for the welcome screen and navigation works very well.

@0135827 9 months ago

Thanks Raza, another great vid !!

@dougydoe 9 months ago

This is brilliant, Reza!! Just catching up on the latest videos as I got a bit busy so this was a pleasant one. Yeah, this will make our lives a bit more easier in terms of UI design and I already have some ideas as to what and where to use this. Thanks for sharing again. Awesome stuff. 😁😁

@wolfgangmeudt-pt9xe 9 months ago

Hi Reza, thanks for this video, it is awesome as usual.

@sanjaygowda4708 9 months ago

Great info. Thanks much ❤

@JethrosYoutube 9 months ago

Thanks for sharing, Reza!

@apaiservotrecoeuretvotrees5516 9 months ago

Amazing Reza !

@AmirNaved 9 months ago

Thank you for explaining

@radiosonicfan1726 9 months ago

Hell Yeah. For years I wanted a Word or Excel like feature to add a grid similar to adding a table X columns by X rows.

@justapasserby69420 8 months ago

This is such a game-changer to induce app developers to create better save & load prompts and dialog boxes to their apps.

The usual barrier was that it was so hard to design dialog boxes, even in the component pane, because it's layers on layers of horizontal and vertical containers just to target the middle part of the canvas.

I just updated all of my reusable dialog box components with the new grid component, and now I only need two layers of containers before the actual buttons and text controls. 1 grid, 1 vertical. Ok maybe one more horizontal or grid container for the buttons just to arrange them properly.

I used to have 4-5 layers of containers in my dialog box components before the grid control arrived. Lmao

@psla2592 6 months ago

2 helpful tips for anyone wondering.
If your grid is 2 columns and you want a label to cover both put Column Start 1 and Column End 3 This way you label will cover both columns.
If your labels and textbox look huge because the Grid Container covering a large portion of the screen and since we dont have an option for row maximum height, just increase the number of rows and it will squish everything together, just remember to add a minimum row height.
That should help get a better look and feel for your Grid Container / Form Look.

@themvpguyy 8 months ago

Thank you Reza

@daoabdjakaridja1479 9 months ago

Superbe Vidéo !
On va passer moins de temps maintenant pour la gestion de responsivité.

Merci Reza !!

@STY-ze3yy 8 months ago

first class yaaara

@scott42c 9 months ago

Thanks

@IvanaMilovanovic994 8 months ago

Guess you could also implement logic to columns and rows based on the screen size

@thiagofreitas7337 9 months ago (edited)

Great content as usual Reza, thanks.

Is there any other video about the logic to make it work as a form, making the button submit the information and the other fields create or patch a register?