Grid
Grades distribuem elementos em colunas equilibradas, garantindo alinhamento consistente e leitura responsiva.
Quando usar
- Exibir múltiplos cards ou componentes com largura semelhante.
- Montar dashboards com métricas organizadas por colunas.
- Oferecer comparações lado a lado sem recorrer a tabelas complexas.
- Alternar automaticamente a quantidade de colunas conforme a largura disponível.
Exemplo básico
Grid com métricas em três colunas
Por quê: apresenta métricas equilibradas com alinhamento previsível.
Variantes
Grid-2 para comparações
Quando usar: comparar conteúdos em duas colunas com foco equilibrado. Por quê: dois slots mantêm equilíbrio entre leitura e respiro visual.
Grid-auto para coleções flexíveis
Quando usar: distribuir itens com largura dinâmica sem definir número fixo de colunas. Por quê: o ajuste automático evita colunas quebradas em telas menores.
Grid-4 em telas amplas
Quando usar: dashboards extensos em desktop que pedem quatro colunas alinhadas. Por quê: aproveita a largura máxima disponível mantendo proporções iguais.
Composição (usando com outros)
- Grid + Card — cada célula mantém espaçamento interno consistente.
- Grid + Component Definition — renderiza coleções dinâmicas com dados variáveis.
- Grid + Container-wide — garante espaço lateral para múltiplas colunas.
Grid com componentes reutilizáveis
Por quê: padroniza o layout das métricas reduzindo repetição de código.
Slots & Props
| Nome | Tipo | Padrão | Descrição | Obrigatório |
|---|---|---|---|---|
variante | enum (grid-2, grid-3, grid-4, grid-auto) | grid-3 | Define número de colunas ou ajuste automático. | Não |
conteúdo interno | blocos DSL | — | Cards, componentes e layouts renderizados nas células. | Sim |
container suporte | layout | — | Recomenda-se envolver a grid em container ou container-wide. | Não |
Erros comuns (Do/Don’t)
❌ Errado — Quatro colunas espremidas
✅ Correto — Grid proporcional
Por quê: a quantidade de colunas deve respeitar a largura do container para preservar a legibilidade.
❌ Errado — Checklist em grid
✅ Correto — Sequência em stack
Por quê: fluxos sequenciais exigem leitura de cima para baixo para evitar confusão.
Referências cruzadas
Relacionados
Container: delimita a largura antes de aplicar a grid.Card: elemento mais comum em células de grade.Component List: gera grids dinâmicas com dados vindos de coleções.Dashboard: guia que explora grids em telas analíticas.
Composições recomendadas
- Grid + Container-wide → dashboards com múltiplas colunas e respiro lateral.
- Grid + Stack interno → células com subelementos alinhados verticalmente.
- Grid + Component Definition → layouts reutilizáveis com dados variáveis.
Grid com stack interno
Por quê: stacks dentro do card mantêm alinhamento vertical sem quebrar o layout da grade.