Container Block
The Container block (called Grid in the block picker) 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.
| Layout Label | Variant Value | Description |
| Full | "1" | Single full-width column; children stack as full-width rows |
| 1:1 (2 columns) | "1_1" | Two equal columns |
| 1:2 | "1_2" | One-third left, two-thirds right |
| 1:3 | "1_3" | Quarter left, three-quarters right |
| 2:1 | "2_1" | Two-thirds left, one-third right |
| 2:3 | "2_3" | Two-fifths left, three-fifths right |
| 3:1 | "3_1" | Three-quarters left, quarter right |
| 3:2 | "3_2" | Three-fifths left, two-fifths right |
| 1:1:2 | "1_1_2" | Quarter / quarter / half |
| 1:2:1 | "1_2_1" | Quarter / half / quarter |
| 2:1:1 | "2_1_1" | Half / quarter / quarter |
| 3 columns | "1_1_1" | Three equal columns (default for new blocks) |
| 4 columns | "1_1_1_1" | Four equal columns |
| 5 columns | "1_1_1_1_1" | Five equal columns |
| 6 columns | "1_1_1_1_1_1" | Six equal columns |
Container Properties
Property | Type | Required | Where to Set | Description |
|---|---|---|---|---|
variant | string (layout key) | Optional | Inspector → Layout | Column layout ratio. Default: |
visibility | conditions | Optional | Inspector → Appearance → Visibility | Show/hide the container and all its children based on conditions |
styles | style object | Optional | Inspector → Appearance → Layout, Background and Border sections | Height (min/max), margin, padding, gap and Break After (Layout); color, image and shadow (Background); stroke and radius (Border) |
theme | inherit | light | dark | Optional | Inspector → Appearance → Theme | Force a light or dark theme for all child blocks, or inherit app theme. Default: inherit |
permissions | permission rule | Optional | Inspector → Appearance → Permissions | Restrict who can see the container and all its children |
htmlAttributes | HTML attributes | Optional | Block actions menu → HTML Attributes, then the HTML Attributes section of the inspector | Escape hatch for raw HTML attributes on the container element. The section appears only after you add it from the menu. |
customCSS | CSS string | Optional | Block actions menu → Custom CSS, then the Custom CSS section of the inspector | Custom CSS applied to the container element. The section appears only after you add it from the menu. |
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. In equal-column layouts the new row repeats the column widths, so five blocks in a 1_1 layout render as two full rows plus a third row with one block. In ratio layouts (such as 1_2, 1_3 or 2_1_1) only the first columns follow the ratio; any extra child takes a single grid cell instead of its column's width. To put several blocks in one column, place them in a Stack.
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 Break After) are not offered in mobile apps, and the container uses native layout rendering.
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
| Property | Type | Default | Where to Set | Description |
| direction | "column" | "row" | column | Inspector → Appearance → Direction | Main axis. Column stacks top-to-bottom; Row lays out left-to-right |
| distribute (justifyContent) | flex-start | center | flex-end | space-between | flex-start | Inspector → Appearance → Distribute | How children are spaced along the main axis |
| align (alignItems) | flex-start | center | flex-end | stretch | stretch (web), flex-start (mobile) | Inspector → Appearance → Align | How children line up on the cross axis |
| wrapContent | boolean | false | Inspector → Appearance → Wrap Content | When on, children overflow onto a new line instead of shrinking |
| reverseOrder | boolean | false | Inspector → Appearance → Reverse Order | Renders children in reverse. Row becomes right-to-left; Column becomes bottom-to-top |
| styles | style object | gap-md, transparent bg | Inspector → Appearance → Styles | Width, height, margin, padding, gap, overflow, background, shadow, border stroke/radius, rotation |
| theme | inherit | light | dark | inherit | Inspector → Appearance → Theme | Force light or dark theme for all children, or inherit |
| visibility | conditions | always visible | Inspector → Appearance → Visibility | Show/hide the stack and all children |
| permissions | permission rules | no restriction | Inspector → Appearance → Permissions | Role or rule-based access controlling who sees the Stack |
| interactions | event handlers | none | Inspector → Appearance → Interactions | Attach On Click, On Mouse Enter, or On Long Press event handlers |
| effects (mobile only) | list of effect layers | none | Inspector → Appearance → Effects | Drop shadow, inner shadow, layer blur, background blur. Mobile apps only |
Stack Events
Stack events are available in Web apps only. In Mobile apps a Stack has no events — wrap it in a Pressable block to make it tappable.
Event | Trigger | Available When |
|---|---|---|
On Click | User taps or clicks the Stack | Web apps, all device previews |
On Mouse Enter | Pointer moves over the Stack | Web apps, Desktop device |
On Long Press | User presses and holds | Web apps, Mobile or Tablet device previews |
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.
Container vs. Stack — At a Glance
| Feature | Container | Stack |
| Layout model | Fixed column-ratio grid | Flexbox (single axis) |
| Column ratios | 15 presets (e.g., 1:2, 2:1:1) | Not applicable |
| Direction control | Not applicable | Row or Column |
| Alignment controls | Not applicable | Distribute + Align |
| Wrap content | Children always wrap to new rows | Opt-in via Wrap Content toggle |
| Scrolling | Via child blocks | Via Overflow style setting |
| Events | None (layout only) | Web apps only: On Click, On Mouse Enter, On Long Press (in Mobile apps, wrap in a Pressable) |
| Mobile effects | No | Yes (drop shadow, blur, etc.) |
| Theme override | Yes | Yes |
| Visibility conditions | Yes | Yes |
Related blocks
Block | Relationship |
|---|---|
Card | A Stack-like container with a built-in header, border, and collapse behavior |
A dedicated scroll region with scroll-specific methods and events | |
Repeats its children once per data row; Container/Stack lay children out once | |
Uses Container/Stack as its slot children; overlays the page |