# Galeries

Une galerie dessine une carte par enregistrement. Elle se lie par le module `dataSource` partagé et n'a pas de clé `pagination` qui lui soit propre : le filtrage, le tri et la pagination appartiennent tous à la liaison.

| Propriété     | Description                                                                                                             |
| ------------- | ----------------------------------------------------------------------------------------------------------------------- |
| `dataSource`  | Les enregistrements dessinés. Voir [Liaison de données](/fr/docs/pages-data-binding).                                   |
| `gridColumns` | Le nombre de colonnes par point de rupture : `{ mobile, sm, md, lg, xl }`, chacun de 1 à 6.                             |
| `layout`      | `grid` pour des rangées uniformes, `masonry` pour des hauteurs variables, `carousel` pour une piste unique à parcourir. |
| `galleryCard` | La forme de la carte elle-même.                                                                                         |

```yaml
tables:
  - name: products
    fields:
      - { name: name, type: single-line-text }
      - { name: photo, type: single-attachment }
pages:
  - name: Products
    path: /products
    components:
      - type: gallery
        dataSource: { table: products }
        gridColumns: { mobile: 1, md: 2, lg: 3 }
        layout: masonry
        galleryCard:
          coverImage: '$record.photo'
          aspectRatio: '4:3'
          children:
            - { type: text, element: h3, content: '$record.name' }
```

## La carte

`galleryCard` est l'endroit où se déclare la forme propre d'une carte. `coverImage` est généralement une référence `$record.*` et `aspectRatio` prend un rapport comme `4:3`, `16:9` ou `1:1`. `children` sont les composants rendus dans le corps de la carte, et `hoverOverlay: { children }` se rend par-dessus la carte au survol. `onClick` est l'action qu'un clic sur la carte exécute.

Comme `children` est un arbre de composants ordinaire, une carte se compose avec les mêmes types qu'une page : un `text` pour le titre, un `badge` pour un statut, une `description-list` pour une suite de faits. `$record.<champ>` résout dans tous.

## Pages connexes

- [Liaison de données](/fr/docs/pages-data-binding) — `dataSource`, ses filtres, ses tris et sa pagination.
- [Listes](/fr/docs/data-components-lists) — le même principe, en suite verticale.
- [Conception adaptative](/fr/docs/responsive-design) — les points de rupture que `gridColumns` reprend.