# Stack

Empilha as peças, uma embaixo da outra, com o mesmo espaço da régua entre todas.

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

## Quando usar

-   Sempre que houver espaço entre peças: o espaço é do pai, e só um passo da régua.

## Quando não usar

-   **Para o recuo de dentro** de um componente: ele já vem pronto.
-   **Com uma margem escrita à mão junto:** nunca; a checagem reprova.

## Exemplos

### Stack

Três peças a `space-3`.

Mostrar código

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

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

### Um espaço por nível

Quanto mais perto, mais junto: entre as partes, um espaço grande (6); dentro de cada parte, um pequeno (2). Um Stack dentro do outro, cada um com o seu.

Mostrar código

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

## Atributos

Atributo

Valores

Para quê

`class="feitio-stack"`

obrigatório

O layout.

`data-gap`

`1` a `7`

O espaço entre as peças. No React, nenhum outro valor compila.

`align`

`"start"`, `"center"`

Como as peças se alinham na horizontal.

As regras e um formulário inteiro montado com os três estão em [Layout](/pt/dev/layout/).