--- title: Stack description: Organizes elements horizontally or vertically along the block or inline axis. Use to structure layouts, group related components, or control spacing between elements. api_version: 2025-10 api_name: pos-ui-extensions source_url: html: https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-componentsstructure/stack md: https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-componentsstructure/stack.md --- # Stack Organizes elements horizontally or vertically along the block or inline axis. Use to structure layouts, group related components, or control spacing between elements. ## Properties * alignContent AlignContentKeyword Aligns the Stack along the cross axis. * alignItems AlignItemsKeyword Aligns the Stack's children along the cross axis. * blockSize SizeUnitsOrAuto Default: 'auto' Adjust the block size. **Mobile surfaces:** Avoid using percentage-based sizes. They do not behave as expected when placed within a scrollable container. * columnGap '' | SpacingKeyword Default: '' - meaning no override Adjust spacing between elements in the inline axis. This overrides the column value of gap. * direction 'block' | 'inline' Default: 'block' Sets how the children are placed within the Stack. This uses logical properties. * gap MaybeTwoValuesShorthandProperty\ Default: 'none' Adjust spacing between elements. A single value applies to both axes. A pair of values (eg large-100 large-500) can be used to set the inline and block axes respectively. * id string A unique identifier for the element. * inlineSize SizeUnitsOrAuto Default: 'auto' Adjust the inline size. * justifyContent JustifyContentKeyword Default: 'normal' Aligns the Stack along the main axis. * maxBlockSize SizeUnitsOrNone Default: 'none' Adjust the maximum block size. **Mobile surfaces:** Avoid using percentage-based sizes. They do not behave as expected when placed within a scrollable container. * maxInlineSize SizeUnitsOrNone Default: 'none' Adjust the maximum inline size. **Mobile surfaces:** Avoid using percentage-based sizes. They do not behave as expected when placed within a scrollable container. * minBlockSize SizeUnits Default: '0' Adjust the minimum block size. **Mobile surfaces:** Avoid using percentage-based sizes. They do not behave as expected when placed within a scrollable container. * minInlineSize SizeUnits Default: '0' Adjust the minimum inline size. **Mobile surfaces:** Avoid using percentage-based sizes. They do not behave as expected when placed within a scrollable container. * padding MaybeAllValuesShorthandProperty\ Default: 'none' Adjust the padding of all edges. [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) is supported. Note that, contrary to the CSS, it uses flow-relative values and the order is: * 4 values: `block-start inline-end block-end inline-start` * 3 values: `block-start inline block-end` * 2 values: `block inline` For example: * `large` means block-start, inline-end, block-end and inline-start paddings are `large`. * `large none` means block-start and block-end paddings are `large`, inline-start and inline-end paddings are `none`. * `large none large` means block-start padding is `large`, inline-end padding is `none`, block-end padding is `large` and inline-start padding is `none`. * `large none large small` means block-start padding is `large`, inline-end padding is `none`, block-end padding is `large` and inline-start padding is `small`. A padding value of `auto` will use the default padding for the closest container that has had its usual padding removed. * paddingBlock MaybeTwoValuesShorthandProperty<'' | PaddingKeyword> Default: '' - meaning no override Adjust the block-padding. * `large none` means block-start padding is `large`, block-end padding is `none`. This overrides the block value of `padding`. * paddingBlockEnd '' | PaddingKeyword Default: '' - meaning no override Adjust the block-end padding. This overrides the block-end value of `paddingBlock`. * paddingBlockStart '' | PaddingKeyword Default: '' - meaning no override Adjust the block-start padding. This overrides the block-start value of `paddingBlock`. * paddingInline MaybeTwoValuesShorthandProperty<'' | PaddingKeyword> Default: '' - meaning no override Adjust the inline padding. * `large none` means inline-start padding is `large`, inline-end padding is `none`. This overrides the inline value of `padding`. * paddingInlineEnd '' | PaddingKeyword Default: '' - meaning no override Adjust the inline-end padding. This overrides the inline-end value of `paddingInline`. * paddingInlineStart '' | PaddingKeyword Default: '' - meaning no override Adjust the inline-start padding. This overrides the inline-start value of `paddingInline`. * rowGap '' | SpacingKeyword Default: '' - meaning no override Adjust spacing between elements in the block axis. This overrides the row value of gap. ### AlignContentKeyword Align content sets the distribution of space between and around content items along a flexbox's cross axis, or a grid or block-level element's block axis. ```ts 'normal' | BaselinePosition | ContentDistribution | OverflowPosition | ContentPosition ``` ### BaselinePosition ```ts 'baseline' | 'first baseline' | 'last baseline' ``` ### ContentDistribution ```ts 'space-between' | 'space-around' | 'space-evenly' | 'stretch' ``` ### OverflowPosition ```ts `unsafe ${ContentPosition}` | `safe ${ContentPosition}` ``` ### ContentPosition ```ts 'center' | 'start' | 'end' ``` ### AlignItemsKeyword Align items sets the align-self value on all direct children as a group. ```ts 'normal' | 'stretch' | BaselinePosition | OverflowPosition | ContentPosition ``` ### SizeUnitsOrAuto ```ts SizeUnits | 'auto' ``` ### SizeUnits ```ts `${number}px` | `${number}%` | `0` ``` ### SpacingKeyword ```ts SizeKeyword | 'none' ``` ### SizeKeyword ```ts 'small-500' | 'small-400' | 'small-300' | 'small-200' | 'small-100' | 'small' | 'base' | 'large' | 'large-100' | 'large-200' | 'large-300' | 'large-400' | 'large-500' ``` ### MaybeTwoValuesShorthandProperty ```ts T | `${T} ${T}` ``` ### JustifyContentKeyword Justify content defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. ```ts 'normal' | ContentDistribution | OverflowPosition | ContentPosition ``` ### SizeUnitsOrNone ```ts SizeUnits | 'none' ``` ### MaybeAllValuesShorthandProperty ```ts T | `${T} ${T}` | `${T} ${T} ${T}` | `${T} ${T} ${T} ${T}` ``` ### PaddingKeyword ```ts SizeKeyword | 'none' ``` ### Examples * #### Code ##### Default ```html Paid Active ``` ## Preview ![](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/stack-default.png)