Container Layout Types
Last updated
Last updated
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.
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.
Additional controls will be available dependent on the parent container of this element.
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.
Additional controls will be available dependent on the parent container of this element.
Select which nonant this element should be pinned to. The element will stay pinned there as the parent container resizes.
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.
This control defines how the child elements will be aligned with respect to the parent container.
Child elements will align to the left edge of the parent.
Child elements will align to the center of the parent.
Child elements will align to the right edge of the parent.
Child elements will receive even spacing between the edges of the parent container and each other.
Child elements are placed at the start and end of a container with even spacing between elements
Additional parent controls will be available dependent on the parent container of this element.
Child controls
Child element will align to the top edge of the parent container
Child element will align to the center of the parent container
Child element will align to the bottom of the parent container
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.
Move this element to the first position in the row.
Move this element one position to the left in the row.
Move this element one position to the right in the row.
Move this element to the last position in the row.
See See Responsive Properties
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.
This control defines how the child elements will be aligned with respect to the parent container.
Child elements will align to the top edge of the parent.
Child elements will align to the center of the parent.
Child elements will align to the bottom edge of the parent.
Child elements will receive even vertical spacing between the edges of the parent container and each other.
Child elements are placed at the start and end of a container with even vertical spacing between elements
Additional parent controls will be available dependent on the parent container of this element.
Child element will align to the left edge of the parent.
Child element will align to the center of the parent.
Child element will align to the right edge of the parent.
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.
Move this element to the first position in the row.
Move this element one position to the left in the row.
Move this element one position to the right in the row.
Move this element to the last position in the row.
