vaiperui

componentes / grid

Grid

CSS grid com colunas responsivas, gap e itens que ocupam colunas ou linhas.

Como usar

`columns` aceita um número (1 a 12) ou um objeto por breakpoint (`base`, `sm`, `md`, `lg`, `xl`), mobile first: `{ base: 1, md: 2, lg: 4 }`. Use `GridItem` quando uma célula precisa ocupar mais de uma coluna ou linha.

preview
colSpan 2
1
2
3
4
5
6
Grid.tsx
import { Grid, GridItem } from "vaiperui";
 
<Grid columns={{ base: 1, md: 2, lg: 4 }} gap={4}>
  <GridItem colSpan={2}>Wide</GridItem>
  <GridItem>Item</GridItem>
</Grid>

Colunas

preview
1
2
3
4
columns={2}
1
2
3
4
5
6
columns={3}
1
2
3
4
5
6
7
8
columns={4}
colunas.tsx
<Grid columns={2} />
<Grid columns={3} />
<Grid columns={{ base: 1, md: 3 }} />

Gap

preview
1
2
3
gap={0}
1
2
3
gap={2}
1
2
3
gap={8}
gap.tsx
<Grid columns={3} gap={0} />
<Grid columns={3} gap={8} />

Spans

preview
colSpan 2
rowSpan 2
1
2
colSpan / rowSpan
spans.tsx
<GridItem colSpan={2} />
<GridItem rowSpan={2} />

Props

PropValoresPadrãoDescrição
columns1 – 12 | { base, sm, md, lg, xl }1Número de colunas, ou um valor por breakpoint
gap0 | 1 | 2 | 3 | 4 | 6 | 84Espaço entre os filhos (passos de 4px)
asElementType"div"Elemento ou componente a renderizar (`section`, `ul`, `main`...)
GridItem colSpan / rowSpan1 – 12 / 1 – 6nenhumColunas e linhas que o item ocupa

Acessibilidade

  • `Grid` e `GridItem` renderizam `<div>`s simples por padrão, sem papel; `as` troca o elemento (por exemplo `ul`/`li`).
  • São puramente visuais: nenhum foco, teclado ou comportamento ARIA é adicionado, e props extras chegam ao elemento.
  • Leitores de tela e Tab seguem a ordem do DOM, não a posição visual.

Tenha em mente

  • `colSpan`/`rowSpan` e `columns` responsivo mudam só o layout; mantenha a ordem do código fazendo sentido em todos os breakpoints.
  • Não adiciona semântica de lista: use `as="ul"` e `as="li"` no `GridItem` quando os itens forem uma lista.