Widgets
...
Style
Layout
3 min
Layout controls how child elements or content are arranged, including direction, alignment, justification, wrapping, and gap. It ensures consistent spacing and alignment across different devices.
- Direction – sets the main axis of the layout. Determines how child elements are placed inside the parent:
- Horizontal – elements are arranged left to right (flex-direction: row).
- Vertical – elements are arranged top to bottom (flex-direction: column).
- Reverse – elements are arranged in the opposite order of the selected direction. For technical details, see the MDN article on flex-direction.
- Justify – defines how child elements are distributed along the main axis:
- Start – items are packed at the beginning of the container.
- Center – items are centered along the main axis.
- End – items are packed at the end of the container.
- Space between – items are evenly distributed with equal space between them.
- Space around – items are evenly distributed with space before, between, and after each item. See the MDN article on justify-content for more.
- Align – controls how elements are aligned along the cross axis (perpendicular to the main axis):
- Start – items align to the start of the cross axis.
- Center – items align to the center of the cross axis.
- End – items align to the end of the cross axis.
- Stretch – items stretch to fill the available space along the cross axis. Learn more in the MDN article on align-items.
- Wrap – determines whether items should stay on a single line or wrap onto multiple lines if space is limited:
- No wrap – all items stay on a single line.
- Gap – defines spacing between child elements. Controls both horizontal and vertical spacing, equivalent to the CSS gap property. Details can be found in the MDN article on gap.
- Select the element to be styled.
- Select the Style section in the right sidebar.
- Expand the Layout tab.
- Configure direction, justify, align, wrap, and gap as needed.
- Child elements or nested containers can have their own layout configuration and do not inherit the parent’s layout properties by default.
- If you edit the element while the widget builder is set to mobile view, those changes will apply only to the mobile layout and will not affect the default (desktop) layout.
