CmGrid
CmGrid responsivo com spans por breakpoint.
Import
Caminho público recomendado para este componente.
import { CmButton, CmCard, CmForm, CmGrid, CmGridContainer, CmInput } from "cosmemilton-ui";CmGridContainer cria a grade: nele você escolhe columns, gap, rowGap e columnGap.
columns define quantas colunas existem. Por padrão, o container usa 1 coluna no base, 2 em md e 4 em xl.
CmGrid é opcional e serve para controlar span, ou seja, quantas colunas um item ocupa.
columns e span aceitam número fixo ou objeto responsivo com base, sm, md, lg e xl. Exemplo: { base: 1, md: 4 }.
Use as="form", as="section", as="article" ou as="footer" quando a grade também precisar ter semântica. Use variant="actions" para alinhar rodapés de botões.
Colunas responsivas
No celular fica uma coluna. Em telas médias vira duas. Em telas grandes vira quatro.
Alunos
1 coluna no mobile.
Financeiro
2 colunas no tablet.
Agenda
4 colunas no desktop.
Relatórios
Mesmo espaçamento.
Itens maiores com span
Use CmGrid quando um item precisa ocupar mais espaço que os outros dentro da mesma grade.
Resumo
Ocupa 2 de 4 colunas a partir de md.
Status
Ocupa 1 coluna.
Meta
Ocupa 1 coluna.
Detalhes
Ocupa a linha inteira no desktop.
Formulário com rodapé de ações
A grade também pode organizar campos e botões sem depender de CSS externo.