CmGridContainer / CmGrid
Use para telas de cards, formulários e dashboards. A API curta de CmGrid cobre o fluxo container/size; CmGridContainer continua disponível para templates e presets.
Import
import { CmGrid, CmGridContainer } from "cosmemilton-ui/server";API curta com container e size
Uso parecido com Material UI: container define espaçamento e cada item define seu tamanho.
size=8
size=4
base=6 md=4
base=6 md=8
Auto e grow
Com container row (flex): size="auto" ajusta ao conteúdo, size={n} ocupa n/12 da linha e size="grow" preenche o restante.
size=auto
size=6
size=grow
Toolbar com row
Padrão de barra: laterais em size="auto" (largura do conteúdo) e o miolo em size="grow" empurrando as pontas.
Filtros
Busca — size="grow" ocupa todo o espaço livre
Novo
Row responsivo (empilha e vira linha)
size={{ base: 12, md: "auto"/"grow" }}: empilha no mobile e vira uma linha flexível a partir de md.
Lateral (auto a partir de md)
Conteúdo (grow a partir de md)
Auto-fit e template assimétrico
Combina cards fluidos com uma grade de filtros/resultado sem CSS local.
Receita
Auto-fit com largura mínima.
Pedidos
Auto-fit com largura mínima.
Clientes
Auto-fit com largura mínima.
SLA
Auto-fit com largura mínima.
Filtros
Coluna menor.
Resultado
Área principal assimétrica.
API rápida
Props principais de cada peça exportada.
CmGrid container
CmGrid item
CmGridContainer
Notas
Para uso cotidiano, prefira <CmGrid container spacing="md"> e <CmGrid size={...}>.
size aceita número, valores responsivos, "auto" e "grow".
size="auto" e size="grow" exigem o container em modo flex: <CmGrid container row>. Sem row (modo grid de 12 colunas), eles caem para uma única coluna.
No modo row: size="auto" encolhe ao conteúdo, size={n} ocupa n/colunas da linha e size="grow" preenche o espaço livre — itens maiores que a linha quebram para a próxima.
Use columns para grids com quantidade fixa por breakpoint.
Use autoFit/autoFill + minColumnWidth para padrões repeat(auto-fit, minmax(...)).
Use templateColumns para colunas assimétricas como 0.55fr 1fr ou 1fr 10rem.