# Stack

Stacks pieces one below the other, with the same scale space between all of them.

## 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>
```

## When to use

-   Whenever there is space between pieces: space belongs to the parent, and only a step of the scale.

## When not to use

-   **For a component’s inner padding:** it comes ready.
-   **With a hand-written margin alongside:** never; the check fails it.

## Examples

### Stack

Three pieces at `space-3`.

Show code

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

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

### One space per level

The closer, the more together: between the parts, a large space (6); inside each part, a small one (2). One Stack inside the other, each with its own.

Show code

```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>
```

## Attributes

Attribute

Values

What for

`class="feitio-stack"`

required

The layout.

`data-gap`

`1` to `7`

The space between pieces. In React, no other value compiles.

`align`

`"start"`, `"center"`

How pieces align horizontally.

The rules and a whole form built with all three are in [Layout](/en/dev/layout/).