Grille

Sans columns, une grille loge autant de pistes d’au moins min que la place le permet, et chacune se partage également le reste. C’est le comportement que veut une liste de cartes, et il ne demande aucun point de rupture : redimensionnez cette page et les démos ci-dessous se réorganisent d’elles-mêmes.

Auto-ajustement

Le comportement par défaut. Les pistes font au moins 16rem.

Routage

Chargement de données

Ressources

Images

Îlots

Recherche

grid(
  ...['Routage', 'Chargement de données', 'Ressources', 'Images', 'Îlots', 'Recherche'].map((name) =>
    card({ variant: 'flat' }, cardBody(text({ variant: 'small' }, name))),
  ),
)

Largeur de piste

min fixe jusqu’où une piste peut se rétrécir avant que la grille ne passe à moins de colonnes. Plus petit veut dire plus de colonnes.

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 nombre fixe de colonnes

Passez un nombre quand le compte ne doit pas changer avec la fenêtre. Chaque piste prend une part égale.

Deux

Trois

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

Un gabarit sur mesure

Une chaîne est transmise telle quelle comme grid-template-columns, pour une découpe barre latérale / contenu ou tout ce que CSS grid sait exprimer.

Barre latérale

Le contenu, qui prend le reste de la rangée.

grid({ columns: '12rem 1fr', gap: 'lg' },
  card({ variant: 'flat' }, cardBody(text({ variant: 'small' }, 'Barre latérale'))),
  card({ variant: 'flat' }, cardBody(text({ variant: 'small' }, 'Le contenu, qui prend le reste de la rangée.'))),
)

Espacement et alignement

Courte

Une carte plus haute, avec deux lignes de texte, pour montrer ce qu’align fait à ses voisines plus courtes.

Courte

grid({ min: '10rem', gap: 'xl', align: 'center' },
  card({ variant: 'flat' }, cardBody(text({ variant: 'small' }, 'Courte'))),
  card({ variant: 'flat' }, cardBody(text({ variant: 'small' }, 'Une carte plus haute, avec deux lignes de texte, pour montrer ce qu’align fait à ses voisines plus courtes.'))),
  card({ variant: 'flat' }, cardBody(text({ variant: 'small' }, 'Courte'))),
)

Props

Prop	Type	Défaut	Description
`columns`	`number \| string`	—	Un nombre fixe de pistes, ou une valeur grid-template-columns brute. Omettez pour l’auto-ajustement.
`min`	`string`	`'16rem'`	Largeur minimale d’une piste en auto-ajustement.
`gap`	`Space`	`'md'`	Espace entre les pistes et les rangées.
`align`	`string`	`'stretch'`	N’importe quelle valeur align-items.
`as`	`string`	`'div'`	Élément à rendre.

Une piste ne devient jamais plus large que la grille elle-même, même quand min dépasse la place disponible — un minimum de 16rem ne provoque donc pas de barre de défilement horizontale sur un téléphone de 320 px.