Designing responsive apps in Power Apps can be frustrating especially when resizing, reordering, and aligning elements on different devices becomes a never-ending formula chase. But what if there was a simpler way? Power Apps layout containers offer a clean, efficient way to create responsive designs without writing a single formula.
Enter layout containers the secret to building modern, responsive Power Apps without writing formulas.
In this blog post, we’ll walk through:
- The difference between bad vs. good responsive app layouts
- How to use container templates effectively
- Aligning elements using horizontal and vertical containers
- A real-world layout replication using nested containers
- Pro tips for alignment, spacing, and responsiveness
Let’s demystify layout containers in Power Apps and save you hours of work.
The Problem with Manual Layouts
Before discovering containers, many app builders (including experienced ones) tried to manage layout using complex formulas:
Width = App.Width * 0.66
X = SomeControl.X + SomeControl.Width + 10
This approach becomes fragile and unsustainable as your app scales.
For example, a “bad” home screen might look fine initially until you rotate the device or view it on another screen size. Suddenly:
- Buttons disappear
- Images shift
- Navigation is misaligned
Responsive design breaks down fast.
What a “Good” Layout Looks Like Without Formulas
By using layout containers, you can build a responsive design that adjusts automatically across screen sizes. With proper setup:
- Buttons stay centered
- Images scale properly
- Navigation remains intuitive
- No layout formulas are needed
This is possible thanks to container-based screen templates now built directly into Power Apps.
Getting Started with Container Templates in Power Apps
When creating a new screen, Power Apps offers containerized templates such as:
- Sidebar
- Header/Main
- Dashboard layouts
For a layout with a header, sidebar, image, and navigation buttons, the “Sidebar” template works perfectly.
Once added, inspect the Tree View to see the structure:
Screen
├── Screen Container
├── Header Container (Top)
└── Bottom Container
├── Sidebar Container (Left)
└── Main Container (Right)
Key Tip:
Don’t give up on containers because you can’t drag-and-drop like other controls. Instead:
- Use the Tree View to reorder
- Or use the right-click > Reorder > Move to start/end options
Horizontal vs. Vertical Containers Explained
Understanding directionality is crucial:
- Horizontal containers lay out items left to right
- Vertical containers stack items top to bottom
Use the properties panel to confirm the direction. Icons in the Tree View also help identify layout flow.
Aligning Images and Buttons Without Formulas
To resize and align images or buttons within containers, use:
- Align in container: Set to Stretch for full width
- Flexible height/width: Enable to auto-resize within available space
- Justify/Align: Vertically and horizontally center buttons
- Gap: Control spacing between items (e.g., 10px between buttons)
You can now center multiple buttons, align images perfectly, and ensure responsiveness without touching a single formula.
Real-World Layout Replication: Building a Booking App UI
Let’s recreate a professional layout inspired by a hotel booking web app, using nested containers.
Step 1: Set Up a Vertical Screen Container
- Add a vertical container to fill the entire screen
- Set a background color (e.g., pale blue)
- Rename logically:
ScreenContainer
Step 2: Add a Main White Container Inside
- Insert another vertical container
- Set background: white
- Add padding: 15px top/bottom, 30px sides
- Rename:
MainContainer
Designing a Responsive Three-Part Header
To create a header with:
- A logo (left)
- Action buttons (center)
- User info (right)
Nest three horizontal containers inside your main header container:
MainHeaderContainer
├── LeftHeaderContainer (Logo)
├── MidHeaderContainer (Buttons)
└── RightHeaderContainer (User Info)
Use alignment and padding settings to:
- Center items vertically and horizontally
- Add gap spacing between buttons
- Adjust container height manually if needed
Creating the Working Area: Filters, Data, and Details
Below the header, add a horizontal container:
- Left: Filtering and gallery
- Right: Image and additional info
Nest containers as follows:
WorkingAreaContainer (Horizontal)
├── LeftWorkingContainer (Vertical)
│ ├── FiltersContainer (Gray background, horizontal)
│ └── GalleryContainer (White, with data)
└── RightWorkingContainer (Vertical)
├── SelectedItemDetails
└── Image or Actions
Use minimum height, padding, flexible width, and drop shadows to polish the layout and improve visual hierarchy.
Final Touches: Fully Responsive and Formula-Free
Once completed, your app will:
- Adjust to device orientation
- Auto-center buttons and images
- Handle resizing with grace
- Require zero formulas for responsiveness
You’re left with a professional, modern UI without the layout headaches.
Best Practices for Using Layout Containers
Here are some tips to streamline your development:
Use container templates when possible
Rename containers logically for better readability
Understand directionality (horizontal vs. vertical)
Leverage flexible sizing and alignment settings
Use Tree View for reordering controls
Minimize formulas use container properties instead
Want to Level Up Your Power Platform Skills?
If you’re serious about designing better Power Apps, improving data visuals in Power BI, or mastering the Microsoft Power Platform structured training can make all the difference.
Check out Data Bear’s Power BI Training for hands-on, real-world courses designed to elevate your Power BI and reporting skills.
Conclusion: Layout Containers Save Time & Sanity
Power Apps containers aren’t just a nice-to-have they’re essential for building responsive, user-friendly Canvas Apps. Once you understand how to structure, align, and nest containers effectively, you’ll:
- Stop writing redundant formulas
- Design apps that work on all devices
- Save hours of development and debugging
