Container Block

The Container block is the fundamental structure block: a box that arranges child blocks into one of 15 column layouts — full width, equal columns (2–6 columns), or ratio splits like 1_2 and 2_1_1. It has no data, events, or methods of its own; it purely structures a page, controls spacing and borders, and shows or hides whole sections at once.

Note: Use Container when you need fixed column ratios — for example a sidebar + content split with 1_3 layout. Use Stack when you need flexible flex-based alignment along a single axis.

Column Layouts

The variant property controls the column layout. Numbers describe width ratios: 1_2 is one-third / two-thirds. Equal-width layouts are labeled by column count.

Container Properties

Container Behaviors & Gotchas

Warning: Extra children wrap to a new row: A column layout doesn't cap how many blocks you can drop in. Children fill columns left-to-right, and once a row is full the next child starts a new row with the same column widths. Five blocks in a 1_1 layout render as two full rows plus a third row with one block.

Note: Full layout has no columns: The Full variant stacks children as full-width rows — gap still applies between them, but column behavior only exists in multi-column layouts.

Note: Mobile apps get a different style set: Some web-only style options (like page-break control) are not offered in mobile apps, and the container uses native layout rendering.

Container — Examples & Patterns

Stack Block

The Stack is the primary flexible layout block: a flex container that lines up child blocks along a single axis — a horizontal Row or vertical Column — with control over gap, cross-axis alignment, main-axis distribution, wrapping, overflow scrolling, and a light/dark theme override. Stack renders on both web and native mobile.

Note: Default to Stack as your go-to layout container. Use Container only when you specifically need fixed column-ratio splits.

Stack Properties

Stack Events

Stack Behaviors & Gotchas

Warning: Effects override legacy shadow/blur styles: If you set both a shadow in Styles and a drop shadow in Effects, the Effect wins — it layers on top of framing styles.

Warning: Adding or removing the first effect remounts the Stack: Switching between zero effects and one effect remounts the block, resetting any transient visual state in the subtree. This only happens at the empty-to-first and last-to-empty boundary.

Note: Scrolling behavior differs on mobile: Setting Overflow to scroll on web is plain CSS. On native, the Stack wraps children in a real scroll view (vertical or horizontal). A native Stack only scrolls when the overflow value is explicitly set.

Note: Reverse Order + Direction combine: Direction offers only Row and Column. Enabling Reverse Order produces row-reverse or column-reverse — the two settings combine.

Note: Layout properties can be bound to variables: Direction, Align, Distribute, Wrap, Reverse Order, Theme, and Styles values can all be driven by variables and update live at runtime.

Stack — Examples & Patterns

Container vs. Stack — At a Glance

Related Blocks

Frequently Asked Questions

When should I use a Container instead of a Stack?

Use Container when you need fixed column-ratio layouts — for example a 1/3 sidebar next to a 2/3 content area. Use Stack when you need flexible flexbox alignment along a single axis (row or column), with controls over alignment, distribution, wrapping, and scrolling.

Can I nest a Stack inside a Container column?

Yes. Each column in a Container can hold any block, including a Stack. This is the typical pattern: a Container sets the column widths, and Stacks inside each column arrange their own children with flexbox control.

How do I make a Stack scroll vertically?

In the Stack's Styles panel, set Overflow to a vertical scroll value and give the Stack a fixed Max Height. Content beyond that height will scroll. On native mobile apps, this automatically creates a real scroll view.

Why did my Stack contents overflow instead of wrapping?

Wrap Content is off by default. Enable it in Inspector → Appearance → Wrap Content so children wrap to a new line when the available width runs out instead of shrinking or overflowing.

Can I conditionally show or hide a Container and all its child blocks at once?

Yes. Set a Visibility condition on the Container itself (Inspector → Appearance → Visibility). When the condition evaluates to false, the Container and all blocks inside it are hidden as one unit — you don't need to set visibility on each child individually.