Stack

Usage

Use the stack component to distribute space and alignment between items in a vertical or horizontal direction (one-dimensional layout)¹. If you need both vertical and horizontal layout (two-dimensional layout), use the grid component instead. When in doubt, we recommend reading the grid vs stack documentation.

We recommend using the stack component for inline or text based elements. Stack enables items to scale, wrap, and shrink depending on each item's content and the available space.

Do

Use the stack component for inline or text based elements. Like a navigational list or a button group.

Don’t

Don't use the stack component to create a grid of items. Use the grid component instead.

Options

Gap

Use the gap to change the space between items. Use small values when grouping closed related items, and larger values to separate sections or non-related items between them.

Do

Use large gap values to separate sections or non-related items.

Don’t

Don't use large gap values for related items.

Direction, alignment, and justification

Use the direction to control the rendering direction of items. The direction can be adjusted on different viewports. For example, an icon and a label might be rendered horizontally on large viewports, but vertically on small viewports for better readability and composition.

Use the align and justify options for determining the rendering alignment on the cross-axis and main-axis respectively. Taking the example above, the icon and label might be aligned to the center on mobile viewports, but aligned to the start on large viewports.

Related components

• Grid: Use the grid component to create flexible and responsive grid-based layouts.