# Layout

Stack, Inline e Grid: o espaço entre as peças vem do pai e só pode ser um passo da régua.

## Por que

Espaço escrito à mão em cada lugar acaba saindo da régua: uma margem a mais aqui, uma zerada ali. No Feitio, o espaço entre as peças é sempre do pai, e só pode ser um passo da régua. Três componentes cuidam disso, e ninguém mais escreve margem, gap ou recuo.

## Os três

### Stack

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

Mostrar código

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

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

### Inline

Põe as peças lado a lado e quebra a linha quando não cabem.

Mostrar código

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

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

### Grid

Colunas que se ajustam à largura: cada uma tem uma largura mínima e, abaixo dela, desce para a linha de baixo. Nunca passa da tela.

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

Um formulário inteiro sem nenhuma margem: o Stack de fora separa os campos com `space-5`, o de dentro junta rótulo, dica e campo com `space-1`, e o Inline alinha os botões.

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

`gap`

`1` a `7` (padrão: 4)

O espaço entre as peças, um passo da régua. Nenhum outro valor é aceito.

`align`

`"start"`, `"center"`

No Stack: como as peças se alinham na horizontal.

`justify`

`"between"`, `"end"`

No Inline: como as peças se distribuem na linha.

`min`

uma largura, como `"15rem"`

No Grid: a largura mínima de cada coluna. Abaixo dela, a coluna desce.

No React, `gap` é do tipo `1 | 2 | 3 | 4 | 5 | 6 | 7`: um valor fora da régua nem compila.

## Regras

-   **O espaço é do pai.** Um componente não tem margem por fora; quem decide a distância entre ele e o vizinho é o Stack, o Inline ou o Grid em volta.
-   **Nada de espaçador vazio** entre dois elementos. O espaço mora no gap do pai.
-   **Recuo de dentro é do componente:** o recuo de um botão ou de um bloco vem pronto e não se muda à mão.
-   **Uma checagem automática** reprova margem, gap ou recuo escritos à mão no código de quem usa o Feitio.

Os três funcionam nesta página em CSS puro, e também vêm como componentes do Astro e do React (`@feitio/astro`, `@feitio/react`).