Grid
Grade que organiza os filhos em linhas e colunas que se alinham. Use para dashboards, listas de cards, galerias e formulários com campos lado a lado; para uma direção só, use um Stack.
No prazo
Novo site
Nova home e página de preços.
Em risco
App 3.0
Modo offline e um checkout novo, revisado com o time de pagamentos antes do beta.
Concluído
Central de ajuda
Migrar 140 artigos.
No prazo
Migração da cobrança
Do gateway antigo para o novo, até 15/12/2026.
Concluído
Nova marca
Logo, cores e tipografia.
No prazo
Portal de parceiros
Cadastro, contratos e repasses num lugar só.
minChildWidth
align
Instalação
Configure o Camaleo uma vez (Instalação) e importe. Ele não tem estado, então renderiza no servidor.
import { Grid } from "@camaleo/react";Anatomia
Um elemento grid com data-slot="grid". Os filhos são as células; qualquer filho pode ocupar mais espaço com gridColumn, como o card aqui, que pega a linha inteira.
grid <div> · minChildWidth="9rem"
stat <article> · uma célula
stat <article>
stat <article>
card <div> · gridColumn: "1 / -1"
Exemplos
Cada exemplo é um arquivo real que você pode copiar. Todos usam o estilo, o modo e a cor escolhidos na barra acima. Estreite a janela para ver o layout se reorganizar.
- No prazo
Novo site
Nova home e página de preços.
- Em risco
App 3.0
Modo offline e um checkout novo, revisado com o time de pagamentos antes do beta.
- Concluído
Central de ajuda
Migrar 140 artigos.
- No prazo
Migração da cobrança
Do gateway antigo para o novo, até 15/12/2026.
Cards que cabem na largura
O minChildWidth coloca quantas colunas couberem, cada uma com pelo menos essa largura. Sem breakpoints: quatro cards por linha no desktop, um no celular.
Pedidonº A-20931Feito em28/10/2026PagamentoPixEntregaExpressa, 2 dias úteis
Qualquer modelo de colunas
Passe uma string em columns para tudo que o CSS grid aceita. "auto 1fr" ajusta os rótulos ao mais longo e dá o resto para os valores.
Armazenamento por equipe
Design42 GB de 100 GB
Engenharia71 GB de 100 GB
Um item na linha inteira
Não existe prop de span: defina gridColumn no filho. "1 / -1" ocupa a linha toda, quantas colunas couberem, então nunca quebra o layout.
Duas colunas, uma no celular
Ponha campos curtos lado a lado e dê a linha inteira aos longos. Com minChildWidth, o formulário volta para uma coluna em telas estreitas.
Inicial
Para uma pessoa.
Equipe
Projetos compartilhados, papéis e uma biblioteca comum de componentes e tokens.
Empresa
SSO e log de auditoria.
Alturas iguais
Desligue o interruptor. O align="stretch" padrão deixa cada card da linha tão alto quanto o maior, e os botões ficam alinhados.
Morro do Pai Inácio Cachoeira da Fumaça Poço Azul Lençóis ao entardecer Trilha do Vale do Pati Gruta da Pratinha
Galeria como lista
Renderize as="ul" para o leitor de tela anunciar "6 itens". Mantenha o DOM na ordem em que as pessoas veem e evite order ou empacotamento denso, que embaralham.
Em contexto
São pedaços inteiros de interface para copiar, no estilo que você escolheu.
Armazenamento por equipe
Design42 GB de 100 GB
Engenharia71 GB de 100 GB
Marketing18 GB de 100 GB
Projetos
App 3.0
Em riscoMigração da cobrança
No prazoCentral de ajuda
ConcluídoDashboard de vendasGrid · Stat · Card · Meter · Badge
Endereço de entrega
Expressa, 2 dias úteis
Formulário de endereçoCard · Grid · Field · Input · Button
Inicial
R$ 0/mês
Para uma pessoa.3 projetos
Mais escolhido
Equipe
R$ 120/mês
Projetos compartilhados, papéis e uma biblioteca comum de componentes e tokens.Projetos ilimitados
Empresa
R$ 245/mês
SSO e log de auditoria.SSO e log de auditoria
Planos e preçosGrid · Card · Badge · Button
Boas práticas
Inicial
Para uma pessoa.
Equipe
Projetos compartilhados, papéis e uma biblioteca comum de componentes e tokens.
FaçaCards da mesma linha com a mesma altura.
Com o stretch padrão e a ação embaixo, os botões se alinham e a linha é lida como um conjunto.
Inicial
Para uma pessoa.
Equipe
Projetos compartilhados, papéis e uma biblioteca comum de componentes e tokens.
EviteCards que terminam em alturas diferentes.
align="start" deixa a borda de baixo irregular, e o olho precisa caçar cada botão.
FaçaJunte campos que andam juntos.
O número do cartão ocupa a linha; validade e CVV ficam lado a lado porque a pessoa preenche os dois juntos.
EviteDuas colunas só para ocupar espaço.
Campos sem relação lado a lado fazem a pessoa ziguezaguear, e a ordem de leitura não é a ordem de digitação.
Props
PropriedadeTipoPadrãoDescrição
as"div" | "section" | "ul" | "form" | …"div"Elemento renderizado, para a semântica certa (por exemplo
as="ul").columnsstring | number—Um número de colunas iguais, ou qualquer valor de
grid-template-columns.minChildWidthstring—Alternativa responsiva a
columns: quantas colunas couberem, cada uma com pelo menos essa largura.gapnumber0Espaço entre linhas e colunas, em múltiplos de
--cml-space: gap={4} = 1rem.alignCSS align-items"stretch"Alinhamento vertical dos itens na linha (
align-items).O as aceita as mesmas tags do Box. Quando os dois estão definidos, minChildWidth vence columns. Os filhos se posicionam com gridColumn e gridRow.
Styling hooks
Cada prop vira uma propriedade customizada no elemento. Deixe uma prop de fora e o seu CSS pode definir essa propriedade.
Atributos
data-slot"grid"
Tokens que ele lê
Só deste componente
--cml-grid-align--cml-grid-columns--cml-grid-gap--cml-space
/* layout com barra lateral a partir de 48rem, uma coluna abaixo disso */
@media (min-width: 48rem) {
.account[data-slot="grid"] {
--cml-grid-columns: 16rem minmax(0, 1fr);
}
}Acessibilidade
—O Grid não renderiza nenhum elemento interativo. O Tab passa pelos filhos na ordem do DOM, linha por linha.
- Grid é layout, não grade de dados: não tem papel grid nem navegação por setas. Para dados que a pessoa compara entre linhas, use uma Table.
- Mantenha a ordem visual igual à do DOM. order, grid-auto-flow: dense e posicionamento explícito movem células sem mover o foco nem o que o leitor de tela lê.
- Renderize uma coleção de cards ou fotos com as="ul" para o tamanho ser anunciado, e dê um nome com aria-label quando não houver título visível.
- Não use a posição para passar significado ("o card da direita"): com minChildWidth, a coluna da direita desce no celular.
Relacionados
StackUma coluna ou uma linha, quando as células não precisam se alinhar.CardA superfície de que a maioria dos grids é feita.TableLinhas e colunas de dados, com cabeçalhos navegáveis.
Esta página foi útil? · Editar esta página no GitHub