Sizing and Positioning

Control where blocks sit and how much space they take.

The right sidebar’s Sizing and Arrange sections control a block’s dimensions, position, rotation, order, and lock state.

Sizing

Width and height can use px, em, rem, or %. The available modes depend on the block type and where the block sits.

Mode	Details
Fixed	Use the value exactly
Auto	Let the content or parent layout decide
Auto, Fixed Min	Auto size, but do not go below the minimum
Auto, Fixed Max	Auto size, but do not go above the maximum
Auto, Between Min & Max	Auto size within a defined range

Use fixed sizes when the block should keep a specific footprint. Use auto sizing when the block should respond to its content. Use min and max values when the block should be flexible but still stay within a useful range.

Percent sizes are relative to the available space from the canvas or parent panel. They are useful for templates that need to respond to different canvas or panel sizes.

Aspect Ratio

Aspect ratio keeps width and height connected. When aspect ratio is locked, one axis acts as the source and the other axis is calculated from it.

Use aspect ratio for images, shapes, or blocks that should scale without stretching. If both width and height are fully auto, the editor may need one axis defined before aspect ratio can be locked.

X and Y Position

Blocks on the canvas and inside Free Panels use X and Y values. X/Y can be set from the left/top edge or from the right/bottom edge.

When X or Y uses %, the anchor selector also controls how the block itself lines up to that percentage:

Percent anchor	Details
Start	The block starts at the percent position
Center	The block is centered on the percent position
End	The block ends at the percent position

For example, set X to 50% and choose Center to keep a block centered horizontally as the canvas or panel changes size. This works by applying the right CSS translation behind the scenes.

Arrange Controls

The Arrange section also includes:

Align to canvas Quickly aligns a selected block to the canvas

Rotation Rotates the block

Flip Flips the block horizontally or vertically

Lock Prevents accidental movement or selection changes

Layer order Moves a block forward, backward, to the front, or to the back

ID Sets a block id for advanced targeting

Extra CSS Opens advanced CSS controls for the selected block

Rotation and flip affect the visible block. The block still belongs to its parent layout.

Inside Panels

Blocks inside panels follow the panel layout. A child in a Flex Panel behaves differently than a child in a Grid Panel or Table Panel.

Parent	How children are placed
Canvas	Free positioning
Free Panel	Free positioning inside the panel
Flex Panel	Row or column flow
Grid Panel	Flow through rows and columns
Table Panel	Assigned row and column positions

In Flex, Grid, and Table Panels, children can use margin and alignment overrides. Grid and Table children can also use auto sizing to fill the space their parent gives them.

Practical Patterns

Use % position with Center anchors to keep a block centered.
Use right or bottom anchoring when a block should stay pinned to the far edge.
Use Auto, Fixed Max for content that can shrink naturally but should never get too wide.
Use Auto, Fixed Min when content can grow but should not collapse below a readable size.
Use Auto, Between Min & Max when a block should respond to content inside a controlled range.