kit

Stack

Children in a column with even space between them, the most common layout there is, with the gap taken from the spacing scale.

Tier 1 · CSS only Layout preview

Example

Item 1
Item 2
Item 3
Gap 5
Gap 5
Gap 5
Show the markup 
<div class="demo-pair">
  <div class="kit-stack" data-gap="2"><div class="demo-box">Item 1</div><div class="demo-box">Item 2</div><div class="demo-box">Item 3</div></div>
  <div class="kit-stack" data-gap="5"><div class="demo-box">Gap 5</div><div class="demo-box">Gap 5</div><div class="demo-box">Gap 5</div></div>
</div>

Usage

<div class="kit-stack" data-gap="3">
  <h2>Title</h2>
  <p>Supporting text.</p>
  <div class="kit-cluster">…</div>
</div>
Attribute Values Default
data-gap 0 to 6, a step of the spacing scale (0, 4, 8, 12, 16, 24, 32px) 4
data-align start, center, end stretch

A child with data-push takes up the spare space, so whatever comes after it sits at the bottom: handy for a card's footer.

The stack owns the space between its children and zeroes their own block margins, so spacing is decided in one place.

Accessibility

  • Layout only: it changes no roles and no reading order. The visual order is the source order, so keyboard and screen-reader order match what people see.