vaiperui

componentes / grid

Grid

CSS grid con columnas responsivas, gap e ítems que ocupan columnas o filas.

Cómo usar

`columns` acepta un número (1 a 12) o un objeto por breakpoint (`base`, `sm`, `md`, `lg`, `xl`), mobile first: `{ base: 1, md: 2, lg: 4 }`. Usa `GridItem` cuando una celda debe ocupar más de una columna o fila.

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>

Columnas

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}
columnas.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

PropValoresPredeterminadoDescripción
columns1 – 12 | { base, sm, md, lg, xl }1Número de columnas, o un valor por breakpoint
gap0 | 1 | 2 | 3 | 4 | 6 | 84Espacio entre los hijos (pasos de 4px)
asElementType"div"Elemento o componente a renderizar (`section`, `ul`, `main`...)
GridItem colSpan / rowSpan1 – 12 / 1 – 6ningunoColumnas y filas que ocupa el ítem

Accesibilidad

  • `Grid` y `GridItem` renderizan `<div>` simples por defecto, sin rol; `as` cambia el elemento (por ejemplo `ul`/`li`).
  • Son puramente visuales: no se añade foco, teclado ni comportamiento ARIA, y las props extra llegan al elemento.
  • Los lectores de pantalla y Tab siguen el orden del DOM, no la posición visual.

Ten en cuenta

  • `colSpan`/`rowSpan` y `columns` responsivo solo cambian el layout; mantén el orden del código con sentido en todos los breakpoints.
  • No añade semántica de lista: usa `as="ul"` y `as="li"` en `GridItem` cuando los elementos sean una lista.