Layout
Stack, Inline e Grid: o espaço entre as peças vem do pai e só pode ser um passo da régua.
Nesta página
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
<div class="feitio-stack" data-gap="3">
…
</div><Stack gap={3}>
…
</Stack>Inline
Põe as peças lado a lado e quebra a linha quando não cabem.
Mostrar código
<div class="feitio-inline" data-gap="2">
…
</div><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
<div class="feitio-grid" data-gap="3" style="--feitio-grid-min: 9rem">
…
</div><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.
<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).