In a nutshell
Layout controls the size and position of an element on the building space. You can set the element's width and height independently as well as define the space outside the element's container.

1. Description

Layout defines how large an element is through its width and height, and where it sits on the portal page, through its distance from the edges of its parent container. Together these two controls determine the element's footprint on the page, how much space it occupies, and exactly where that space is positioned.

For example, when an H-Stack is placed inside a Canvas, its position relative to each edge of the stack can be defined individually.

2. Possible values

Layout is divided into two groups of controls:

1. Position
2. Size
   

2.1. Position

Note: Position controls (T, L, R, B) are only visible when the stack's direct parent is a Canvas element. For other element's whose parent container is an H-Stack, V-Stack, or the portal page itself, position is managed by the parent stack's alignment and spacing settings and these controls will not be available separately.

2.2. Size

Value	How it works
px	Lets you define the width and height in fixed pixel values. The element holds that size regardless of the screen or parent container's size. This can be chosen when the element needs a precise, consistent size across all contexts.
%	Allows you to set percentage values of the parent container's resolved width or height. This can be chosen when the element should scale proportionally with its parent container.
Auto	Sizes the element according to the content within it or child elements. Note: Auto is not available on child element since it uses absolute positioning for its child elements.
Fill (Available only when the parent container is a H-Stack or V-Stack)	Expands to consume the remaining space along the main axis of the parent container. This can be chosen when the element should stretch to occupy all available space.

3. Visual reference

4. How to set layout?

1. Select an element on the building space and click the three ellipsis on the hovering toolbar to open the Properties pane on the right.
2. Locate the Layout section at the top of the pane.
3. Set position:
   1. Enter values for T, L, R, and B as needed, and select the unit (px or %) for each.

Note: Position can be set only for a stack element placed within a canvas.

4. Set size:
   1. Width (W): Select the unit (px or %) from the dropdown and enter a value. Or choose Auto or Fill from the same dropdown.
   2. Height (H): Select the unit (px or %) from the dropdown and enter a value. Or choose Auto or Fill from the same dropdown.
5. Click Save in the top right corner to ensure the changes are retained.

5. Applicable elements

Layout is available on the primitives and composite elements listed below. Apart from this, it is also listed as a style property in all presets.

1. Text
2. Image
3. Icon
4. Canvas
5. H-Stack
6. V-Stack
7. Menu
8. Button
9. Portal Forms
10. Embed

6. Points to note

1. Position controls apply within Canvas - T, L, R, and B only appear when the stack's parent is a canvas. Inside a Stack, the parent controls child placement through its own alignment and spacing settings. Refer to Stack property*link to doc* for details.
2. Layout and Alignment work together - Layout determines the element's size and position on the building space. Alignment*link to Alignment doc* determines where the element's content sits within the container's boundaries. Changing the size of an element through Layout may shift how its content appears even if Alignment is unchanged.

Explore other properties

1. Alignment
2. Padding
3. Margin
4. Font
5. Background
6. Corner Radius
7. Border
8. Shadow
9. Opacity
10. Image (Fill/Fit/Stretch)
11. Icon (size, style, color)
12. Stack