Grid

Layout

Grade CSS com 1 a 4 colunas e espaçamento configurável.

Quando usar: listas de cards, prêmios ou campos lado a lado.

Quando não usar: para limitar a largura da página (use Container).

Importar

import { Grid } from '@handsondigital/idplugger-ui'

CSS

Para carregar só o CSS deste componente (além do tokens.css), importe o arquivo dele; as dependências vêm por @import:

@import '@handsondigital/idplugger-ui/css/Grid.css';

Com Tailwind 4 e camadas, use a variante em @layer idplugger-ui:

@import '@handsondigital/idplugger-ui/css/layer/Grid.css';

Exemplos

Default

const Default = () => <Grid columns={3} gap="md">{prizes.slice(0, 3).map((prize) => (
      <Typography key={prize} variant="h5">
        {prize}
      </Typography>
    ))}</Grid>;

Two Columns

const TwoColumns = () => <Grid columns={2} gap="md">{prizes.map((p) => <Typography key={p}>{p}</Typography>)}</Grid>;

Four Columns Large Gap

const FourColumnsLargeGap = () => <Grid columns={4} gap="lg">{prizes.map((p) => <Typography key={p}>{p}</Typography>)}</Grid>;

Single Column

const SingleColumn = () => <Grid columns={1} gap="sm">{prizes.slice(0, 3).map((prize) => (
      <Typography key={prize} variant="h5">
        {prize}
      </Typography>
    ))}</Grid>;

Props

Prop	Tipo	Padrão	Descrição
`columns`	`3 \| 1 \| 2 \| 4`	`—`	Número de colunas. Padrão: 1.
`gap`	`"sm" \| "md" \| "lg"`	`—`	Espaçamento entre itens. Padrão: `md`.