Flexible Stack Layouts
Fixed column grids are useful but limited. A traditional 12-column grid lets you create components that are 1/12, 2/12, 3/12 of the page width, and combinations thereof. For many layouts, that's sufficient. But sometimes you need a layout that's 60/40, or 35/65, or a three-panel arrangement that isn't evenly divided.
Flexible stack layouts support percentage-based widths, enabling precise proportional arrangements that aren't possible with fixed column grids.
Stack Components with Custom Widths
A stack layout is a horizontal row of components. Each component in the stack has a width expressed as a percentage of the stack's total width. A 60/40 split gives the left component 60% and the right component 40%. A three-way split might be 50/30/20.
Percentages must sum to 100 within a row. The builder enforces this — if you have two components at 60% and 30%, adding a third component defaults to 10% to complete the row.
Visual Width Adjustment
In the builder, component widths in a stack can be adjusted by dragging the divider between adjacent components. Drag left to give more space to the right component; drag right to give more space to the left. The percentage values update in real time as you drag.
For precise adjustments, the width percentage can also be entered directly in the component's settings panel. Enter 37.5 for a three-eighths width that drag handles can't precisely target.
Responsive Collapse
Stack layouts collapse responsively on small screens. By default, a horizontal stack becomes a vertical stack on mobile — each component occupies full width stacked one above the other. The vertical order follows the horizontal reading order of the desktop layout.
Component visibility on mobile can be overridden per component. A secondary component that provides supplementary context on desktop can be hidden on mobile to keep the focus on primary content.
Nested Stacks
Stack layouts can be nested. A row in a stack can itself contain a stack, creating multi-level grid structures. This enables complex layouts like a wide main area with a narrow sidebar on the right, where the main area is further divided into a header row and a content area below.
The builder represents nesting clearly through indentation in the component hierarchy panel — the structure is always visible regardless of how deeply it's nested.
No Layout Constraints
Combining flexible stacks, fixed column grids, and full-width components freely creates any page layout. There's no constraint about which layout types can be nested or combined. The layout system is compositional — it accommodates complex real-world page designs without requiring workarounds.