Skip to main content
Learnengineawesome

Stack

The Stack block arranges its contents vertically - one block on top of another, from top to bottom. This is the default direction most layouts flow in, and the Stack block gives you explicit control over it. You use a Stack when you want to group a set of blocks in a vertical arrangement and control the spacing, alignment, and visibility of that group as a unit.

When to use it

  • Building a form where fields should appear in a clear top-to-bottom sequence.
  • Creating a vertical column of content inside a Row block - for complex two-column layouts.
  • Controlling the vertical spacing between a heading, body text, and a button.
  • Nesting a set of related blocks inside a Group in vertical order.
  • Any time you need the "one on top of the other" layout structure with precise spacing control.

How to add it

  1. Open the layout editor.
  2. Click Add Block in the position where you want the vertical arrangement.
  3. Select Stack from the block type list.
  4. Add blocks inside the Stack by clicking Add Block within the Stack container - each block stacks below the previous one.
  5. Adjust spacing, alignment, and visibility settings in the Stack's settings panel.
  6. Save and publish your layout.

Configuration options

  • Justification : Align the blocks inside the Stack to the left, center, or right horizontally.
  • Orientation : Standard is top-to-bottom. You can reverse this to bottom-to-top if needed for a specific design.
  • Allow to wrap to multiple lines : When blocks inside the Stack grow wider than the container, this lets them wrap rather than overflow.
  • Conditional visibility : Show or hide the entire Stack based on a field value - dropdown, radio, yes/no, or checkbox conditions are supported.
  • Sticky position : Keep the Stack fixed at the top of the viewport while users scroll - useful for persistent navigation or action areas.

Example

You're building a notes section for your project detail page. You want a clear section that shows a "Project Notes" heading, followed by a large text area where users can write notes, followed by a Save button. You add a Stack block and place three items inside it in order: a Text block with the heading "Project Notes", a Textarea field for the notes input, and a Save action button. The Stack keeps them neatly ordered vertically with consistent spacing between each element.

Tips

  • Stacks are most useful inside Row blocks - putting a Stack in each column of a Row creates a multi-column layout where each column has its own vertically stacked content.
  • Unlike a bare layout, a Stack gives you a handle to set spacing uniformly across a group of blocks.
  • If you just need to stack blocks with no special styling, you often don't need an explicit Stack - the root layout already flows vertically. Use Stack when you need spacing control or conditional visibility on a vertical group.
← PreviousRowNext →Grid