Screen Layouts: Automatic, Grid and Free Position

What you will learn

• Switch a page between Automatic, Grid and Free position
• Drag and stretch elements in the designer
• Type an exact position and size in the Layout tab

Transcript

In this guide you will learn how to lay out a screen in StepVane. Studio gives you three layouts: Automatic, Grid, and Free position. We will look at each one, and when to use it.

We start from the Receiving starter app, so there is a real page to work with. On the Apps page, press Use on the Receiving card. Studio opens it in Build.

Open the Receive items page. It uses the Automatic layout. Fields stack from top to bottom, at full width, in the order of the list, and the phone sizes everything for you. This is the best choice for most data capture pages, and you reorder the fields just by dragging them in the list.

Now press Grid. The page is split into columns and rows, and the designer shows it in a device frame. For more room, close the phone preview on the right, and choose a zoom of one hundred percent.

Every element sits in cells of the grid. Click an element, such as Supplier, and drag it to another place. It snaps to the cells, and you can stretch it across several columns. Alignment guides help you line things up.

With the element selected, the Layout tab of the properties panel shows exactly where it sits, so you can also type the position and the size instead of dragging.

For a design that must be exact, choose Free position. Now each element goes exactly where you drop it, and you size it with the handles. Studio scales the positions to fit other devices.

That is how you lay out a screen. Use Automatic for most pages, Grid for neat, aligned forms, and Free position when the design must be exact. You can switch between them at any time, without losing your work.

More guides

• ← Describe the App You Want and Let the AI Helper Build It
• Split a GS1-128 Barcode into Lot, Expiry and Weight →
• All video guides