# Stack

Stapelstücke eines unter dem anderen, mit demselben Maßraum zwischen allen von ihnen.

## Playground

```html
<div class="feitio-stack" data-gap="1"><span class="lay-box">1</span><span class="lay-box">2</span><span class="lay-box">3</span></div>
```

## Wann verwenden

-   Jedesmal wenn es Platz zwischen Teilen: Platz gehört zum Elternteil, und nur ein Schritt der Skala.

## Wann nicht verwenden

-   **Für einen Komponente inneren Padding:** es kommt bereit.
-   **Mit einer handgeschriebenen Rand entlang:** nie; der Check versagt es.

## Beispiele

### Stapel

Drei Stücke bei `space-3`.

Code anzeigen

```html
<div class="feitio-stack" data-gap="3">
  …
</div>
```

```jsx
<Stack gap={3}>
  …
</Stack>
```

### Ein Abstand pro Ebene

Je näher, desto zusammengehöriger: zwischen den Teilen ein großer Abstand (6); in jedem Teil ein kleiner (2). Ein Stack im anderen, jeder mit seinem.

Code anzeigen

```html
<div class="feitio-stack" data-gap="6">
  <div class="feitio-stack" data-gap="2">…</div>
  <div class="feitio-stack" data-gap="2">…</div>
</div>
```

## Attribute

Attribut

Werte

Zum Zweck

`class="feitio-stack"`

erforderlich

Das Layout.

`data-gap`

`1` bis `7`

Der Abstand zwischen den Elementen. In React kompiliert kein anderer Wert.

`align`

`"start"`, `"center"`

Wie sich die Stücke horizontal ausrichten.

Die Regeln und ein ganzes Formular, das mit allen drei erstellt wurde, finden sich in [Layout](/de/dev/layout/).