> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://help.sigmacomputing.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://help.sigmacomputing.com/_mcp/server.
# Use stacks to make responsive layouts (Beta)
> Use the Stack layout type in Sigma for responsive workbook layouts. Elements arrange automatically by direction, distribution, and alignment.
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](/docs/sigma-product-releases#beta-features).
Using the **Stack** layout type, you can configure [containers](/docs/use-containers-to-organize-workbook-layouts) 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.
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](/docs/account-type-and-license-overview) 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](#set-the-layout-for-a-stack)
* [Apply a Quick stack preset](#apply-a-quick-stack-preset)
* [Customize sizing for elements in a stack](#customize-sizing-for-elements-in-a-stack)
### 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:
| Option | Details |
| :-------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 
Row | Distribute elements across the container left-to-right. Optionally, turn on the **Wrap** toggle to arrange elements across multiple rows based on sizing. |
| 
Column | Distribute elements down the container's length. |
4. For **Distribute**, select how elements are arranged along the selected **Direction**:
| Option | Details |
| :---------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Start** | Place 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**. |
| **Center** | Place elements starting at the center of the container, expanding towards the edges as more elements are added to the container. |
| **End** | Place 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 between** | Place 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**:
| Option | Details |
| :--------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Start** | Align 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**. |
| **Center** | Align elements with the center of the container. |
| **End** | Align 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:
| Option | Details |
| :---------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Padding** | Adds padding between the elements and the edge of the container. Turn off the toggle to remove padding. |
| **Gap** | Adds a gap between elements in the container. Turn off the toggle to remove all space between elements. |
| **Wrap** | Wrap 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:
| Option | Details |
| :-------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Fill** | The 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 content** | The 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. |
| **Fixed** | The 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.
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:
| Preset | Result |
| :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------- |
|  | Elements arranged horizontally, aligned to the left, each sized to fit its content. |
|  | Elements arranged horizontally, centered, each sized to fit its content. |
|  | Elements arranged horizontally, aligned to the right, each sized to fit its content. |
|  | Elements arranged horizontally, each filling the available width. |
|  | Elements arranged horizontally, each filling the available width and height. |
The following presets set **Direction** to **Column**, arranging elements vertically:
| Preset | Result |
| :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------- |
|  | Elements stacked vertically at the top center, each sized to fit its content. |
|  | Elements stacked vertically at the top, each filling the available width. |
|  | Elements stacked vertically and centered, each filling the available width. |
|  | Elements stacked vertically and centered, each filling the available width and height. |
## Related resources
* [Use containers to organize workbook layouts](/docs/use-containers-to-organize-workbook-layouts)