Grid
Primitivos de layout CSS Grid — `mk-grid` como container responsivo e `mk-grid-item` como célula com span por breakpoint.
mk-grid e mk-grid-item são primitivos de layout CSS Grid encapsulados como web components. O mk-grid é o container responsivo — colunas, gap e padding lateral são fixos via CSS e mudam automaticamente por breakpoint. O mk-grid-item define quantas colunas cada célula ocupa em cada breakpoint via uma cascata mobile-first, sem nenhuma detecção de breakpoint em JavaScript.
Breakpoints
| Breakpoint | Min-width | Colunas | Gap | Padding lateral |
|---|---|---|---|---|
xs | 0px | 4 | --db1-spacing-6 | --db1-spacing-5 |
sm | 480px | 4 | --db1-spacing-6 | --db1-spacing-6 |
md | 768px | 8 | --db1-spacing-6 | --db1-spacing-6 |
lg | 1024px | 12 | --db1-spacing-6 | --db1-spacing-6 |
xl | 1440px | 12 | --db1-spacing-6 | --db1-spacing-7 |
Padrão
Três cards colapsam para coluna única em xs/sm, layout 2+1 em md (8 colunas) e 3-up em lg+ (12 colunas).
import { MkGrid, MkGridItem } from '@db1/makuco-ui-react';
<MkGrid>
<MkGridItem xs={4} lg={4}>Item 1</MkGridItem>
<MkGridItem xs={4} lg={4}>Item 2</MkGridItem>
<MkGridItem xs={4} lg={4}>Item 3</MkGridItem>
</MkGrid><mk-grid>
<mk-grid-item xs="4" lg="4">Item 1</mk-grid-item>
<mk-grid-item xs="4" lg="4">Item 2</mk-grid-item>
<mk-grid-item xs="4" lg="4">Item 3</mk-grid-item>
</mk-grid>Responsivo
Cada mk-grid-item declara spans independentes por breakpoint. A cascata mobile-first propaga o último span definido para os breakpoints maiores que não tenham um valor explícito.
<MkGrid>
<MkGridItem xs={4} sm={4} md={4} lg={3}>Item 1</MkGridItem>
<MkGridItem xs={4} sm={4} md={4} lg={3}>Item 2</MkGridItem>
<MkGridItem xs={4} sm={4} md={4} lg={3}>Item 3</MkGridItem>
<MkGridItem xs={4} sm={4} md={4} lg={3}>Item 4</MkGridItem>
</MkGrid><mk-grid>
<mk-grid-item xs="4" sm="4" md="4" lg="3">Item 1</mk-grid-item>
<mk-grid-item xs="4" sm="4" md="4" lg="3">Item 2</mk-grid-item>
<mk-grid-item xs="4" sm="4" md="4" lg="3">Item 3</mk-grid-item>
<mk-grid-item xs="4" sm="4" md="4" lg="3">Item 4</mk-grid-item>
</mk-grid>Spans Variados
Combinações de span mais comuns num grid de 12 colunas (lg+). Em xs todos os itens empilham na largura total.
<MkGrid>
{/* 100% */}
<MkGridItem xs={4} lg={12}>span 12</MkGridItem>
{/* 50% / 50% */}
<MkGridItem xs={4} lg={6}>span 6</MkGridItem>
<MkGridItem xs={4} lg={6}>span 6</MkGridItem>
{/* 33% × 3 */}
<MkGridItem xs={4} lg={4}>span 4</MkGridItem>
<MkGridItem xs={4} lg={4}>span 4</MkGridItem>
<MkGridItem xs={4} lg={4}>span 4</MkGridItem>
{/* 25% × 4 */}
<MkGridItem xs={4} lg={3}>span 3</MkGridItem>
<MkGridItem xs={4} lg={3}>span 3</MkGridItem>
<MkGridItem xs={4} lg={3}>span 3</MkGridItem>
<MkGridItem xs={4} lg={3}>span 3</MkGridItem>
</MkGrid><mk-grid>
<!-- 100% -->
<mk-grid-item xs="4" lg="12">span 12</mk-grid-item>
<!-- 50% / 50% -->
<mk-grid-item xs="4" lg="6">span 6</mk-grid-item>
<mk-grid-item xs="4" lg="6">span 6</mk-grid-item>
<!-- 33% × 3 -->
<mk-grid-item xs="4" lg="4">span 4</mk-grid-item>
<mk-grid-item xs="4" lg="4">span 4</mk-grid-item>
<mk-grid-item xs="4" lg="4">span 4</mk-grid-item>
<!-- 25% × 4 -->
<mk-grid-item xs="4" lg="3">span 3</mk-grid-item>
<mk-grid-item xs="4" lg="3">span 3</mk-grid-item>
<mk-grid-item xs="4" lg="3">span 3</mk-grid-item>
<mk-grid-item xs="4" lg="3">span 3</mk-grid-item>
</mk-grid>Layout de Página
Padrão completo com header, sidebar, conteúdo principal e footer. Em xs todos os blocos empilham; em lg o sidebar ocupa 3 colunas e o conteúdo 9.
<MkGrid>
<MkGridItem xs={4} lg={12}>Header</MkGridItem>
<MkGridItem xs={4} lg={3}>Sidebar</MkGridItem>
<MkGridItem xs={4} lg={9}>Conteúdo Principal</MkGridItem>
<MkGridItem xs={4} lg={12}>Footer</MkGridItem>
</MkGrid><mk-grid>
<mk-grid-item xs="4" lg="12">Header</mk-grid-item>
<mk-grid-item xs="4" lg="3">Sidebar</mk-grid-item>
<mk-grid-item xs="4" lg="9">Conteúdo Principal</mk-grid-item>
<mk-grid-item xs="4" lg="12">Footer</mk-grid-item>
</mk-grid>Formulário Multicoluna
O par mk-grid + mk-grid-item distribui campos de formulário em colunas responsivas. Em md (8 colunas), dois campos de span 4 ficam lado a lado; o campo de email ocupa as 8 colunas completas.
<MkGrid>
<MkGridItem xs={4} md={4} lg={4}><MkInput label="Nome" placeholder="Digite o nome" /></MkGridItem>
<MkGridItem xs={4} md={4} lg={4}><MkInput label="Sobrenome" placeholder="Digite o sobrenome" /></MkGridItem>
<MkGridItem xs={4} md={8} lg={4}><MkInput type="email" label="Email" placeholder="Digite o email" /></MkGridItem>
</MkGrid><mk-grid>
<mk-grid-item xs="4" md="4" lg="4"><mk-input label="Nome" placeholder="Digite o nome"></mk-input></mk-grid-item>
<mk-grid-item xs="4" md="4" lg="4"><mk-input label="Sobrenome" placeholder="Digite o sobrenome"></mk-input></mk-grid-item>
<mk-grid-item xs="4" md="8" lg="4"><mk-input type="email" label="Email" placeholder="Digite o email"></mk-input></mk-grid-item>
</mk-grid>Props — mk-grid
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
alignItems | "start" | "end" | "center" | "stretch" | "baseline" | "stretch" | Alinhamento vertical dos itens dentro de cada linha do grid. Equivale ao CSS align-items. |
justifyItems | "start" | "end" | "center" | "stretch" | "stretch" | Alinhamento horizontal dos itens dentro de suas células. Equivale ao CSS justify-items. |
alignContent | "start" | "end" | "center" | "stretch" | "space-between" | "space-around" | "space-evenly" | "normal" | "normal" | Distribuição das linhas do grid quando há espaço sobrando. Equivale ao CSS align-content. |
justifyContent | "start" | "end" | "center" | "stretch" | "space-between" | "space-around" | "space-evenly" | "normal" | "normal" | Distribuição das colunas do grid quando há espaço sobrando. Equivale ao CSS justify-content. |
Colunas, gap e padding lateral são fixos e gerenciados pelo CSS do componente — não existem props
columns,gap,columnGapourowGap.
Props — mk-grid-item
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
xs | number | "auto" | — | Span a partir de 0px (grid com 4 colunas). "auto" delega o posicionamento ao grid. |
sm | number | "auto" | — | Span a partir de 480px (grid com 4 colunas). Herda xs se não definido. |
md | number | "auto" | — | Span a partir de 768px (grid com 8 colunas). Herda sm se não definido. |
lg | number | "auto" | — | Span a partir de 1024px (grid com 12 colunas). Herda md se não definido. |
xl | number | "auto" | — | Span a partir de 1440px (grid com 12 colunas; o padding lateral aumenta). Herda lg se não definido. |
Slots
| Componente | Slot | Descrição |
|---|---|---|
mk-grid | (default) | Filhos do grid, mk-grid-item. |
mk-grid-item | (default) | Conteúdo da célula. |
CSS Parts
mk-grid-item expõe a div interna como CSS Part para customização pelo consumidor.
| Part | Descrição |
|---|---|
cell | Elemento div interno que envolve o conteúdo slotado. Útil para aplicar background, border ou border-radius a partir do contexto pai. |
mk-grid-item::part(cell) {
background: var(--db1-color-neutral-50);
border-radius: var(--db1-radius-md);
}Acessibilidade
mk-grid e mk-grid-item são primitivos de layout sem semântica de interação. O browser atribui o role padrão generic ao host de ambos — nenhum role adicional é adicionado.
O conteúdo slotado é responsável por sua própria semântica e acessibilidade. Não use role="grid" nestes componentes — esse role WAI-ARIA é específico para grids de dados interativos (tabelas navegáveis por teclado), não para layout visual.