stack

A stack lines things up in a column or a row, with even space between them. It is the workhorse for laying out everything else.

storage-01

storage-02

storage-03

when to use

To line things up in one direction, with even space between them: the fields of a form, a row of badges, a header with a title and an action.
Wherever you would otherwise build a row or a column with a gap in CSS.

when to use something else

For a grid of items in rows and columns. A stack runs in one direction only. Tiles on the home page go in a tile group; for other grids, use a grid in CSS, as layout describes.
For a row of actions. Use a toolbar. It gives one action the emphasis, and moves what doesn't fit into an overflow menu.
For space around things, or a background. A stack only spaces its children apart. Space around them comes from a box or a card.

anatomy

Container. A column or a row. It can shrink to fit inside other layouts.
Gap. The space between the children, never around them: a step of the space scale, the usual one unless you choose another.
Children. The things in the stack, laid out in the order they come in the page's code.

variants and states

setting	choices	unless you choose
Direction	A column, or a row	A column
Gap	A step of the space scale, from none to the largest	The usual step
Alignment, across the stack	The start, the centre, the end, stretched, or lined up on the line their text sits on	Stretched
Spread, along the stack	Packed at the start, in the centre or at the end, pushed apart to both ends, or with even space around each child	Packed at the start
Wrapping	Children flow onto a new line when they run out of room	Off
Inline	The stack is only as wide as its content, and sits in the line of text	Off

With no alignment chosen, children stretch across the stack: to the full width in a column, and to the full height in a row.

build

test

deploy release

build

push

roll out

p50

p95

p99

Gap 4

p50

p95

p99

Gap 16

p50

p95

p99

Gap 32

Pushed apart to both ends, the first and the last child sit at the two ends, such as a title and its action.

worker-2

Wrapping is for rows. A column only wraps when it is given a fixed height.

gpubatchhttpstatefulread-onlynightlyv2.4.1

behaviour

A stack takes no focus. tab moves through its children in the order they come in the page's code.
There is no reverse direction, so what people see, the order they read in and where focus goes all stay the same. Keep it that way: don't reorder the children with CSS.

The full keyboard map is on the stack's React page.

accessibility

A stack adds no structure for assistive technology. To a screen reader, it isn't there at all.
A stack of similar items isn't a list to a screen reader. When the items are a list, mark them up as one.

content

A stack has no text of its own. Order its children the way people read and act: what the group is about first, and its actions last.

do and don't

Children in the order people read and tab through: “cancel”, then the emphasized action.

don't

The same look, made by turning the row round in CSS. The Tab key now reaches “save changes” before “cancel”, against what people see.

gpubatchhttpstatefulread-only

A row of tags in a narrow space wraps onto the next line.