# Stack

Source: https://design.ritchiebros.com/components/layout/stack/

Use a stack to lay children out in a single direction — vertically or horizontally — with consistent spacing and alignment. It’s based on CSS Flexbox.

## Figma

The Figma reference for **Stack** will appear here once the design link is added.

## Storybook

Interactive examples for **Stack** will render here once the Storybook link is wired in.

## Best practices

- Use a stack for a simple row or column of elements with even spacing.
- Don’t use it for complex, two-dimensional arrangements — use a grid for that.
- Don’t use it for large-scale page layout.
- Control spacing with tokens and prefer logical alignment properties.

## Related components

- [Grid](https://design.ritchiebros.com/components/layout/grid/)
- [Box](https://design.ritchiebros.com/components/layout/box/)
- [Divider](https://design.ritchiebros.com/components/data-display/divider/)