web
You’re offline. This is a read only version of the page.
close
Skip to main content

Announcements

News and Announcements icon
Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Power Apps / Design Grid for layout
Power Apps
Unanswered

Design Grid for layout

(0) ShareShare
ReportReport
Posted on by Microsoft Employee

im new to PowerApps using Canvas, as we are doing the wireframes, it doesnt seem like there is a grid system in the wsyiwyg to make sure the layout stays consistent. 

 

By example, lets just say, we use a 3 column layout, how do I set the site up so that folks layout stuff properly? this way they dont have form fields bleeding way over where some are 100px wide, others are 50, others are 200. 

 

Another is: we have a form. field name on top, then field, I want the layout uniform so that the spacing stays consistent. But dragging n dropping there is lots of room for human error to be off a few pixels each time. Is there a way to create the relative positioning so stuff can be laid out consistently. 

 

I saw a good design here: https://powerapps.microsoft.com/en-us/partner-showcase/infosys-limited-gdpr-compliance-tracker-assistant/ That work was clean and consistent, so trying to see how to get it that way. 

Categories:
I have the same question (0)
  • MagnusGöransson Profile Picture
    424 on at

    Oh, yes!

    Here are a great article on that: https://powerapps.microsoft.com/en-us/blog/ux-patterns-control-positioning/

    Hope that helps, otherwise, just let me know!

    /Magnus

  • Community Power Platform Member Profile Picture
    Microsoft Employee on at

    Thanks for that. I was more closely looking to find a grid like in the image here. 

     

    I'm trying to figure out how to help the "non-designers" understand how best to lay stuff out and visual grid lines would help them better with positioning. 

     

    For instance, if we follow an 8pt grid, lets say we want the first container of content 64px below the nav, how best should we layout a grid so it is easy for folks to follow? 

     

    Annotation 2019-10-28 151249.png

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Introducing the 2026 Season 1 community Super Users

Congratulations to our 2026 Super Users!

Kudos to our 2025 Community Spotlight Honorees

Congratulations to our 2025 community superstars!

Congratulations to the March Top 10 Community Leaders!

These are the community rock stars!

Leaderboard > Power Apps

#1
11manish Profile Picture

11manish 536

#2
WarrenBelz Profile Picture

WarrenBelz 426 Most Valuable Professional

#3
Haque Profile Picture

Haque 305

Last 30 days Overall leaderboard