Grid
Grid
Un primitivo di layout CSS grid con conteggio di colonne responsive di prima classe — si abbina a Stack per i layout flex.
import { Grid, GridItem } from "@pompeitech/vesuvius-ui";Base
1
2
3
4
5
6
7
8
Colonne responsive
cols (e gap) accettano un semplice numero, oppure un oggetto { base, sm, md, lg, xl } per valori per-breakpoint.
1
2
3
4
5
6
7
8
Span di GridItem
larghezza piena
span 2
span 2
API
Grid
| Prop | Tipo | Default | Descrizione |
|---|---|---|---|
cols | 1–12, o { base?, sm?, md?, lg?, xl? } di questi | 1 | Numero di colonne, responsive quando fornito nella forma a oggetto per breakpoint. |
gap | numero della scala di spaziatura Tailwind, o { base?, sm?, md?, lg?, xl? } di questi | 0 | Gap della griglia, responsive allo stesso modo di cols. |
Più ogni prop nativa di <div>.
GridItem
| Prop | Tipo | Descrizione |
|---|---|---|
colSpan | 1–12, o { base?, sm?, md?, lg?, xl? } di questi | Quante colonne occupa questo elemento — responsive, stessa forma a oggetto per breakpoint di Grid. |
rowSpan | 1–6 | Quante righe occupa questo elemento — non responsive. |
Più ogni prop nativa di <div>.