Build appsDesign layouts

Use stacks to make responsive layouts (Beta)

View as Markdown

This documentation describes one or more public beta features that are in development. Beta features are subject to quick, iterative changes; therefore the current user experience in the Sigma service can differ from the information provided in this page.

This page should not be considered official published documentation until Sigma removes this notice and the beta flag on the corresponding feature(s) in the Sigma service. For the full beta feature disclaimer, see Beta features.

Using the Stack layout type, you can configure containers that change their layouts responsively as you add new elements. Similar to the CSS Flexible Box Layout Model, a stack arranges all elements automatically based on a specified layout direction, distribution, and alignment, rather than requiring you to manually place each element in a grid.

A user converts a grid layout container to a stack layout container, and then automatically arranges and resizes its elements to fill the container

Use a stack when you want to:

  • Arrange and size elements dynamically across a container
  • Iterate quickly on designs that might change

This document covers how to configure and customize containers with the Stack layout type, as well as their elements.

User requirements

The ability to create and customize a stack requires the following:

  • You must be assigned an account type with the Create, edit, and publish workbooks permission enabled.
  • You must be the workbook owner or be granted Can edit access to the workbook.

Limitations

  • The Wrap option is only available when Direction is set to Row.

Add a stack to your workbook

You can create a stack by converting a container to use the Stack layout type, or by grouping existing elements into a new stack.

Convert a container to a stack

  1. In the Add element bar, select Layout then Container.
  2. Select the container, then in the editor panel, open the Format section.
  3. Set the Type to Stack.

The container updates to use the default stack layout.

Group elements into a stack

  1. On the canvas, select multiple elements.
  2. In the selection crumb menu, select Create horizontal stack or Create vertical stack.

The selected elements appear in a new stack using the direction you chose.

Customize the layout of elements in a stack

The Stack layout type changes how all elements in a container are arranged. Instead of placing and sizing each element at a specific position in a grid, elements are arranged automatically based on the layout configuration of the stack, and change size in response to other elements.

By default, a stack arranges all elements in a single column, with each element sized to fill the width of the container.

To customize a stack, you can do the following:

Set the layout for a stack

You can change the orientation, spacing, and arrangement of elements in a stack:

  1. Select the container.

  2. In the editor panel, under Format, open the Layout section.

  3. For Direction, select the axis to arrange elements in the container on:

    OptionDetails
    RowDistribute elements across the container left-to-right. Optionally, turn on the Wrap toggle to arrange elements across multiple rows based on sizing.
    ColumnDistribute elements down the container’s length.

  4. For Distribute, select how elements are arranged along the selected Direction:

    OptionDetails
    StartPlace elements starting at the left side of the container if Direction is set to Row, or starting at the top of the container if Direction is set to Column.
    CenterPlace elements starting at the center of the container, expanding towards the edges as more elements are added to the container.
    EndPlace elements starting at the right side of the container if Direction is set to Row, or starting at the bottom of the container if Direction is set to Column.
    Space betweenPlace the first and last elements at the edges of the container, with remaining elements evenly spaced between them.

  5. For Align, select how elements are arranged along the axis perpendicular to the selected Direction:

    OptionDetails
    StartAlign elements with the left side of the container if Direction is set to Column, or with the top of the container if Direction is set to Row.
    CenterAlign elements with the center of the container.
    EndAlign elements with the right side of the container if Direction is set to Column, or with the bottom of the container if Direction is set to Row.

  6. Configure spacing settings for the elements:

    OptionDetails
    PaddingAdds padding between the elements and the edge of the container. Turn off the toggle to remove padding.
    GapAdds a gap between elements in the container. Turn off the toggle to remove all space between elements.
    WrapWrap elements onto a new row. Only available when Direction is set to Row. Turn off the toggle to place all elements in the container in one row.

Customize sizing for elements in a stack

You can configure elements in a stack with unique sizing options that aren’t available in the Grid layout type, allowing you to size elements responsively based on their own contents or other elements in the container.

After placing an element in a stack:

  1. Select the element.

  2. In the editor panel, select Properties.

  3. In the Size section, select an option for the Width and Height settings:

    OptionDetails
    FillThe element fills the available space along the selected axis. Optionally, set a factor for the element to fill relative to other elements in the stack. For example, if there are two elements set to Fill, you can set one of them to 3x fill to have it take three times the space of an element with 1x fill.
    Fit contentThe element resizes to display its own contents. For example, a button element with Fit content dynamically resizes based on the length of the Text in the button.
    FixedThe element fills a specific size, in pixels. You can manually set the size to create custom static layouts.

The available sizing options depend on the element type. For example, viz and image elements can’t use Fit content, and some elements have no configurable Height.

Apply a Quick stack preset

You can configure common layouts in a single click by selecting a preset from the Quick stacks menu.

A user opens the Quick stacks menu and switches between two presets, automatically reconfiguring the container's elements

To use Quick stacks:

  1. Add elements to the stack.
  2. Select the container.
  3. In the editor panel, under Format, open the Quick stacks section.
  4. Select a preset to arrange and size the elements in the stack. To see all available presets, select More.

Each preset sets the direction, distribution, and element sizing for the stack in a single step. Applying a preset overwrites the current layout settings.

The following presets set Direction to Row, arranging elements horizontally:

PresetResult
Two elements arranged in a row, aligned to the left of the container.Elements arranged horizontally, aligned to the left, each sized to fit its content.
Two elements arranged in a row, centered horizontally in the container.Elements arranged horizontally, centered, each sized to fit its content.
Two elements arranged in a row, aligned to the right of the container.Elements arranged horizontally, aligned to the right, each sized to fit its content.
Two elements arranged in a row, each expanded to fill the container width.Elements arranged horizontally, each filling the available width.
Two elements arranged in a row, filling the full width and height of the container.Elements arranged horizontally, each filling the available width and height.

The following presets set Direction to Column, arranging elements vertically:

PresetResult
Two elements stacked in a column at the top center of the container.Elements stacked vertically at the top center, each sized to fit its content.
Two elements stacked in a column at the top, each expanded to fill the container width.Elements stacked vertically at the top, each filling the available width.
Two elements stacked in a column, centered vertically, each filling the container width.Elements stacked vertically and centered, each filling the available width.
Two elements stacked in a column, filling the full width and height of the container.Elements stacked vertically and centered, each filling the available width and height.