# Diseño

Pila, Línea y Rejilla: el espacio entre piezas proviene del padre y solo puede ser un paso de la escala.

## Por qué

Escribir espacios a mano en cada lugar termina fuera de la escala: un margen extra aquí, uno ceroado allí. En Feitio, el espacio entre piezas siempre pertenece al padre y solo puede ser un paso de la escala. Tres componentes se encargan de ello, y nadie escribe margen, gap o padding nuevamente.

## Los tres

### Apilar

Ponen piezas una debajo de otra, con el mismo espacio entre todas ellas.

Mostrar código

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

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

### En línea

Pone piezas lado a lado y envuelve la línea cuando no caben.

Mostrar código

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

```jsx
<Inline gap={2}>
  …
</Inline>
```

### Rejilla

Columnas que se adaptan al ancho: cada una tiene un ancho mínimo y, por debajo de él, pasa a la siguiente fila. Nunca va más allá de la pantalla.

Mostrar código

```html
<div class="feitio-grid" data-gap="3" style="--feitio-grid-min: 9rem">
  …
</div>
```

```jsx
<Grid gap={3} min="9rem">
  …
</Grid>
```

## Juntos

Un formulario completo sin ningún margen: el Stack exterior separa campos con `space-5`, el interior une etiqueta, pista y campo con `space-1`, e Inline alinea los botones.

```jsx
<Stack gap={5}>
  <Stack gap={1}>
    <Label htmlFor="nome">Nome do lembrete</Label>
    <Hint id="nome-dica">Aparece na notificação</Hint>
    <TextInput id="nome" aria-describedby="nome-dica" />
  </Stack>
  <Inline gap={2}>
    <Button variant="primary" type="submit">Salvar lembrete</Button>
    <Button>Cancelar</Button>
  </Inline>
</Stack>
```

## Atributos

Atributo

Valores

Para qué sirve

`gap`

`1` a `7` (predeterminado: 4)

El espacio entre piezas, un paso de la escala. No se acepta ningún otro valor.

`align`

`"start"`, `"center"`

In Stack: cómo se alinean las piezas horizontalmente.

`justify`

`"between"`, `"end"`

In Inline: cómo se expanden las piezas a lo largo de la línea.

`min`

un ancho, como `"15rem"`

In Grid: el ancho mínimo de cada columna. Por debajo, la columna se envuelve.

In React, `gap` tiene el tipo `1 | 2 | 3 | 4 | 5 | 6 | 7`: un valor fuera de la escala ni siquiera se compila.

## Reglas

-   **El espacio pertenece al padre.** Un componente no tiene margen exterior; el Stack, Inline o Grid que lo rodea decide la distancia a su vecino.
-   **No hay espaciador vacío** entre dos elementos. El espacio vive en el gap del padre.
-   **El relleno interior pertenece al componente:** el relleno de un botón o bloque está listo y no se cambia a mano.
-   **Una verificación automática** falla si se escribe margen, gap o relleno a mano en el código de quien usa Feitio.

Los tres funcionan en esta página en CSS puro, y también vienen como componentes de Astro y de React (`@feitio/astro`, `@feitio/react`).