# Stack

Apila piezas una debajo de la otra, con el mismo espacio de escala 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>
```

## Cuándo usarlo

-   Cada vez que hay espacio entre piezas: el espacio pertenece al padre, y solo un paso de la escala.

## Cuándo no usarlo

-   **Para el relleno interno de un componente:** viene listo.
-   **Con un margen a mano al lado:** nunca; la comprobación lo falla.

## Ejemplos

### Apilar

Tres piezas en `space-3`.

Mostrar código

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

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

### Un espacio por nivel

Cuanto más cerca, más juntos: entre las partes, un espacio grande (6); dentro de cada parte, uno pequeño (2). Un Stack dentro del otro, cada uno con el suyo.

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é sirve

`class="feitio-stack"`

obligatorio

El diseño.

`data-gap`

`1` a `7`

El espacio entre piezas. En React, ningún otro valor se compila.

`align`

`"start"`, `"center"`

Cómo se alinean las piezas horizontalmente.

Las reglas y un formulario completo construido con los tres están en [Layout](/es/dev/layout/).