Stacks

A container that lines up what you drop in, with even gaps.

A Stack is a container that arranges what you put in it. Drop four cards into a stack and they line up with even gaps; drop in a fifth, take one out or give one a longer label, and the rest make room. A row of services never needs nudging into line again.

It sits in the palette's Build category, after Frame, in Diagram and Illustrate mode. A new stack is an empty dashed outline: drag things into it.

ServicesAuthOrdersPaymentsWebiOSMacCLIDrop something in: the restmake room, gaps stay even
A row stack of three services, titled, and a two-column grid stack. Every gap is the same.

What it holds

A stack holds the elements whose centre is inside it, the same rule as a frame and a boundary. Dragging the stack carries them, and it paints behind them.

The order is position: left to right in a row, top to bottom in a column, and reading order in a grid. To reorder, drag a child past its neighbour and let go; it takes that slot.

The stack hugs its contents: it resizes to fit them plus its padding. An empty stack keeps its size, so it stays a target to drop into.

Arranging it

Right-click and open the Stack section:

  • Row, Column or Grid. A grid takes a number of Columns, from 2 to 6.
  • Gap: the space between children, 0 to 64 px.
  • Padding: the space inside the edge, 0 to 64 px.
  • Align: where children sit across the flow, at the Start, Centre or End.

Type a title (double-click) and the stack keeps a band for it above its children.

Children glide to their new places when the stack reflows. Stacks nest: put a column stack inside a row stack for a grid of lists.

Was this article helpful?