MasonryLayout

Mur d'éléments de hauteurs variables (galeries, fils de médias, témoignages) empilés en colonnes, sans trous. Chaque élément garde sa hauteur et n'est jamais coupé entre deux colonnes.

Exemples d'utilisation

Colonnes par largeur

Par défaut : 1 colonne, 2 dès 640px, 3 dès 1024px.

<template>
  <SuMasonryLayout :columns="{ base: 1, sm: 2, lg: 3, xl: 4 }">
    <MediaCard v-for="item in feed" :key="item.id" :item="item" />
  </SuMasonryLayout>
</template>

Chaque valeur s'applique jusqu'au seuil suivant (mobile first). Un nombre seul fixe les colonnes à toutes les largeurs : :columns="4".

Colonnes fluides

column-width donne une largeur idéale : le navigateur choisit seul le nombre de colonnes, sans point de rupture.

<SuMasonryLayout column-width="14rem" gap="sm">…</SuMasonryLayout>

API

Props

Prop	Type	Défaut	Description
columns	number | { base?, sm?, md?, lg?, xl? }	{ base: 1, sm: 2, lg: 3 }	Colonnes, fixes ou par largeur de conteneur
columnWidth	string	—	Largeur idéale d'une colonne (longueur CSS) ; remplace columns
gap	'none' | 'sm' | 'md' | 'lg' | 'xl'	'md'	Écart entre les éléments

Slots

Slot	Description
default	Éléments du mur : chaque enfant direct est une tuile

Comportement responsive

Largeur du conteneur	Colonnes (valeur par défaut)
< 640px	1
≥ 640px	2
≥ 1024px	3

Accessibilité

• Ordre de lecture : les éléments se lisent colonne par colonne (de haut en bas, puis colonne suivante), comme la tabulation. Pour un contenu dont l'ordre compte (fil chronologique, résultats triés), préférez le GridLayout.
• Images : donnez un alt à chaque média porteur de sens, et des dimensions (width, height) pour éviter les sauts de mise en page au chargement.