Grid
À quoi il sert
Grid répartit ses enfants en colonnes de largeur minimale donnée, sans media query : le nombre de colonnes suit la place.
Quand l’utiliser
- Présenter des cartes ou des blocs de même importance dont le nombre varie avec la largeur.
- Remplacer des media queries qui ne servent qu’à changer le nombre de colonnes.
Quand ne pas l’utiliser
- Pour deux zones de tailles différentes : utiliser Sidebar.
- Pour des blocs qui se lisent en colonne, dans un ordre strict : utiliser Stack.
Exemples
- Premier élément
- Deuxième élément
- Troisième élément
Premier bloc.
Deuxième bloc.
Troisième bloc.
Quatrième bloc.
<Grid as="ul" min="narrow" space="l">
<li>Premier élément</li>
<li>Deuxième élément</li>
</Grid>Variantes
Largeur large, premier bloc.
Largeur large, deuxième bloc.
Accessibilité
Clavier
- Le composant ne réordonne pas les enfants : l’ordre de tabulation suit le DOM.
Lecteur d’écran
- Avec as="ul", la liste reste lue comme liste : les puces ne sont pas retirées.
- Le composant n’ajoute ni rôle ni libellé.
Garanti par le composant
- Colonnes en repeat(auto-fit, minmax(…, 1fr)), sans media query.
- Enfants directs avec min-inline-size: 0, pour que les colonnes puissent rétrécir.
À la charge de l’intégrateur
- Tester la largeur minimale sur mobile : une colonne trop étroite coupe le texte.
- Vérifier le zoom à 400 % sur les blocs de la grille.
Propriétés
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| space | "xs" | "s" | "m" | "l" | "xl" | 'm' | Espacement entre les enfants (token `--pp-space-*`). |
| min | "narrow" | "medium" | "wide" | 'medium' | Largeur minimale d'une colonne avant passage à la ligne (fraction de la mesure). |
| as | "div" | "ul" | "ol" | "section" | 'div' | Élément rendu ; avec `ul` ou `ol`, les enfants doivent être des `<li>`. |
| class | string | — | Réservé au placement du composant dans son parent. |
Jetons utilisés
--pp-size-measure--pp-space-l--pp-space-m--pp-space-s--pp-space-xl--pp-space-xs
Preuves et décisions
- WCAG 1.3.2 Ordre de lecture significatif (niveau A) : ordre visuel égal à l’ordre du DOM.
- WCAG 1.4.10 Reflow (niveau AA) : test sur chaque page construite.
- Tests : packages/astro/test/Grid.test.ts, apps/docs/e2e/layout.spec.ts (display grid)
- Code source : packages/astro/src/layout/Grid.astro