Griglia

Senza columns, una griglia sistema automaticamente quante più tracce larghe almeno min lo spazio consente, e ciascuna si divide equamente ciò che avanza. È il comportamento che vuole un elenco di schede, e non ha bisogno di breakpoint: ridimensiona questa pagina e le demo qui sotto si riorganizzano da sole.

Adattamento automatico

Il comportamento predefinito. Le tracce sono larghe almeno 16rem.

Routing

Caricamento dati

Risorse

Immagini

Island

Ricerca

grid(
  ...['Routing', 'Caricamento dati', 'Risorse', 'Immagini', 'Island', 'Ricerca'].map((name) =>
    card({ variant: 'flat' }, cardBody(text({ variant: 'small' }, name))),
  ),
)

Larghezza delle tracce

min imposta quanto stretta può diventare una traccia prima che la griglia scenda a meno colonne. Più piccola significa più colonne.

2xl

3xl

4xl

5xl

grid({ min: '9rem' },
  ...['sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'].map((name) =>
    card({ variant: 'flat' }, cardBody(text({ variant: 'small', align: 'center' }, name))),
  ),
)

Un numero fisso di colonne

Passa un numero quando il conteggio non deve cambiare con il viewport. Ogni traccia riceve una quota uguale.

Uno

Due

Tre

grid({ columns: 3 },
  ...['Uno', 'Due', 'Tre'].map((name) =>
    card({ variant: 'flat' }, cardBody(text({ variant: 'small', align: 'center' }, name))),
  ),
)

Un template personalizzato

Una stringa viene passata direttamente come grid-template-columns, per una divisione barra laterale-contenuto o qualunque altra cosa la griglia CSS sappia esprimere.

Barra laterale

Contenuto, che si prende il resto della riga.

grid({ columns: '12rem 1fr', gap: 'lg' },
  card({ variant: 'flat' }, cardBody(text({ variant: 'small' }, 'Barra laterale'))),
  card({ variant: 'flat' }, cardBody(text({ variant: 'small' }, 'Contenuto, che si prende il resto della riga.'))),
)

Spaziatura e allineamento

Corta

Una scheda più alta, con due righe di testo dentro, per mostrare cosa fa align alle sue vicine più basse.

Corta

grid({ min: '10rem', gap: 'xl', align: 'center' },
  card({ variant: 'flat' }, cardBody(text({ variant: 'small' }, 'Corta'))),
  card({ variant: 'flat' }, cardBody(text({ variant: 'small' }, 'Una scheda più alta, con due righe di testo dentro, per mostrare cosa fa align alle sue vicine più basse.'))),
  card({ variant: 'flat' }, cardBody(text({ variant: 'small' }, 'Corta'))),
)

Props

Prop	Tipo	Predefinito	Descrizione
`columns`	`number \| string`	—	Un numero fisso di tracce, oppure un valore grezzo di grid-template-columns. Omettila per l’adattamento automatico.
`min`	`string`	`'16rem'`	Larghezza minima della traccia nell’adattamento automatico.
`gap`	`Space`	`'md'`	Spazio fra tracce e righe.
`align`	`string`	`'stretch'`	Qualunque valore di align-items.
`as`	`string`	`'div'`	Elemento da renderizzare.

Una traccia non diventa mai più larga della griglia stessa, nemmeno quando min è più grande dello spazio disponibile — così un minimo di 16rem non provoca una barra di scorrimento orizzontale su un telefono da 320px.