Stack and row

Use stack for a vertical composition and row for a wrapping horizontal composition. Choose spacing and alignment independently on the same container.

01Preview

.row · .items-center

One

Two

Three

.stack · .control-gap

Label

02Classes

Name	Description
`.stack`	Flex column with content gaps. Children stretch across the available width by default.
`.row`	Wrapping flex row with content gaps. Children are centered on the cross axis by default.
`.layout-gap`	Uses layout gaps between independent blocks; keeps direction and alignment.
`.control-gap`	Uses control gaps within a control group, such as a label and its field or a row of buttons; keeps direction and alignment.
`.justify-start`	Places children at the start of the main axis.
`.justify-center`	Centers children on the main axis.
`.justify-end`	Places children at the end of the main axis.
`.justify-between`	Distributes remaining main-axis space between children.
`.items-start`	Aligns children at the start of the cross axis.
`.items-center`	Centers children on the cross axis.
`.items-end`	Aligns children at the end of the cross axis.
`.items-stretch`	Stretches children across the cross axis when their size on that axis is automatic.

03Notes

Load @dg/ui/styles.css once. These classes add no frame, padding, text alignment or viewport height.
Choose .stack or .row, at most one gap modifier, and at most one modifier from each alignment family. Do not combine opposing choices.
justify-* and items-* require .row or .stack on the same element. Section already includes .stack; an ordinary flex container, Grid or Card does not opt in automatically.
In horizontal writing mode, row's main axis is horizontal and stack's is vertical. justify-* follows the main axis; items-* follows the other axis. Centering needs free space; wrapped rows align their items per line.
Default gaps use --content-gap-block and --content-gap-inline. Gap modifiers use the corresponding --layout-gap-* or --control-gap-* pair, and can also apply to a local CSS grid. They never set padding.
Override one gap token to change one axis. Tokens inherit, so scope the override to the intended group. Section sets its gap through its gap preset, layout by default, so gap modifiers do not apply to it; jointive Grid and Cards tracks retain zero gap.
Let the parent own spacing between children. Use .formatted for an editorial text sequence rather than combining its block margins with a stack gap. Keep custom responsive rules in the owning component.

04Usage

<div class="stack layout-gap">
  <div class="stack">
    <h2>Collection</h2>
    <p>Related content uses the default content gap.</p>
  </div>
  <nav class="row control-gap justify-end" aria-label="Collection actions">
    <a class="ui" href="/artworks">Explore</a>
    <a class="ui" href="/about">About</a>
  </nav>
</div>

05Examples

Actions direction Actions spacing Center the block Longer action labels

01Alignment

Container Main axis Cross axis

This preview reserves height to make vertical alignment visible.

First Another item

Markdown source: foundations/stack-and-row