Container Layout Types
This core reference entry is suited for beginner-level builders.
Container layouts define the behavior and positioning of its child elements. Container layout types are available on any container element (group, floating group, repeating group, etc.), including the page itself. Your page must be a responsive container type (ie not “fixed”) to be actually responsive to changes in screen size. Each container layout type has its own set of controls specific to that layout type. In addition, child elements will inherit unique controls depending on the parent container’s selected layout type.
The new container layouts and their controls are outlined below and include sub-sections for Parent container and Child element controls.
Note: Parent controls act on the container itself while the Child controls act on the child elements inside the parent container.
Fixed
The Fixed layout type defines a fixed width and height container with absolute positioning of its child elements. Child elements are positioned and re-sized by dragging and dropping as you are used to. A container that is fixed will not respond to changes in screen size or content size because what-you-see-is-what-you-get.
Parent Controls
Additional controls will be available dependent on the parent container of this element.
Child Controls
Width & Height
Align to Parent
Child elements are aligned to a nonant in the parent container. A nonant is like a quadrant, but when a rectangle is divided into 9 parts instead of 4. New child elements drawn inside or dragged into an Align to Parent will snap to the nearest nonant.
The position and size of child elements are controlled in the property editor, though elements can be re-positioned by dragging and dropping. As the parent container resizes, child elements will remain aligned to their respective nonant and can overlap each other.
Parent Controls
Additional controls will be available dependent on the parent container of this element.
Child Controls
Pin to nonant selection
Select which nonant this element should be pinned to. The element will stay pinned there as the parent container resizes.
Width & Height
Row
Child elements in a row container are aligned horizontally. These child elements will wrap as the screen is resized or new elements are added. New child elements drawn inside the container will be added to the end of the list by default but can be re-ordered using the order controls or by dragging and dropping.
The position and size of child elements are controlled in the property editor.
Note: Child elements will grow to take up as much space as they can (within the limits of the max width setting) equally. For example, consider a parent row container that is 100px wide. It has two child elements with min widths of 20px and infinite max widths. These elements will grow to be 50px each. If we add a 3rd equal child element to that row, each element will shrink to 33.33 px wide.
Parent Controls
Container alignment
This control defines how the child elements will be aligned with respect to the parent container.
Left-aligned
Child elements will align to the left edge of the parent.
Centered
Child elements will align to the center of the parent.
Right-aligned
Child elements will align to the right edge of the parent.
Space around
Child elements will receive even spacing between the edges of the parent container and each other.
Space between
Child elements are placed at the start and end of a container with even spacing between elements
Row gap (px)
Column gap (px)
Width & Height
Additional parent controls will be available dependent on the parent container of this element.
Child controls
Vertical alignment
Top-aligned
Child element will align to the top edge of the parent container
Centered
Child element will align to the center of the parent container
Bottom-aligned
Child element will align to the bottom of the parent container
Vertical stretch
Child element will stretch to its max height (or height of the parent container, whichever is smaller). This option is disabled if Make this element fixed-height is checked.
Order selection
Make first
Move this element to the first position in the row.
Previous
Move this element one position to the left in the row.
Next
Move this element one position to the right in the row.
Make last
Move this element to the last position in the row.
Width and Height
See See Responsive Properties
Column
Content is aligned vertically. Child elements will stretch or push other elements down as screen or content is resized. New child elements drawn inside the container will be added to the end of the list but can be re-ordered using the order controls or by dragging and dropping.
Position and size are instead controlled in the property editor.
Parent controls
Container alignment
This control defines how the child elements will be aligned with respect to the parent container.
Top-aligned
Child elements will align to the top edge of the parent.
Centered
Child elements will align to the center of the parent.
Bottom-aligned
Child elements will align to the bottom edge of the parent.
Space around
Child elements will receive even vertical spacing between the edges of the parent container and each other.
Space between
Child elements are placed at the start and end of a container with even vertical spacing between elements
Row gap (px)
Width & Height
Additional parent controls will be available dependent on the parent container of this element.
Child controls
Horizontal alignment
Left-aligned
Child element will align to the left edge of the parent.
Centered
Child element will align to the center of the parent.
Right-aligned
Child element will align to the right edge of the parent.
Horizontal stretch
Child element will stretch horizontally to its max width or the width of its parent container (whichever is less). This option is disabled if Make this element fixed-width is checked.
Order selection
Make first
Move this element to the first position in the row.
Previous
Move this element one position to the left in the row.
Next
Move this element one position to the right in the row.
Make last
Move this element to the last position in the row.
Width & Height
Last updated
