Layout Component
Display Modes
Flex Mode (default)
Grid Mode
Masonry Mode
None Mode (plain div)
Flex Layouts
Horizontal with Wrap
Vertical Column
Centered Content
Space Between
Grid Layouts
2 Columns Grid
4 Columns Grid
3×2 Grid (Rows × Cols)
Centered Grid Items
Masonry Layouts
3 Columns — variable heights
Responsive (1 → 2 → 3 → 4 columns)
Redimensionner la fenêtre pour voir les colonnes s'ajuster
columnClassName — style par colonne
Comparaison Masonry vs Grid — mêmes items, hauteurs variables
display="grid" — hauteurs uniformisées
display="masonry" — hauteurs naturelles
Responsive Layouts
Responsive Grid (1 → 2 → 3 → 4 columns)
Try resizing your browser: 1 col on mobile, 2 on tablet, 3 on desktop, 4 on xl screens
Responsive Flex (Column → Row)
Column on mobile, row on desktop
Responsive Gap & Padding
Small spacing on mobile, larger on desktop
Advanced Examples
Dashboard Layout
Card Grid with Custom Styling
Card 1
Content here
Card 2
Content here
Card 3
Content here
Auto-fit Grid (Responsive without breakpoints)
Using autoCols for automatic responsive layout
(taller)
DisplayDropDown Examples
Modes
modes={["flex","masonry","grid"]} (défaut)
modes={["flex","masonry"]}
modes={["flex","grid"]}
modes={["flex"]} → null
Direction
Chaque cellule réserve l'espace dans la direction d'ouverture.
bottom (défaut)
top
left
right
Placement
Le panel s'ancre relativement au bouton.
start
center
end (défaut)
Combinaisons
top + end
top + start
top + center
bottom + start
right + end
left + start
Icons
La prop icons accepte un override partiel ou total — les clés absentes gardent l'icône par défaut.
défaut (CiGrid31 / RiLayoutMasonryFill / IoMdGrid)
icons={ { flex: BsList , masonry: BsColumns , grid: BsGrid } }
icons={ { flex: TbLayoutList , masonry: TbLayoutMasonry , grid: TbLayoutGrid } }
icons={ { flex: BsList } } — masonry + grid restent par défaut
autoPosition
Même prop autoPosition sur tous les boutons. Le hook calcule direction + placement d'après la position réelle dans le viewport au moment du clic.
haut-gauche
haut-centre
haut-droite
bas-gauche
bas-centre
bas-droite
Les panels haut ouvrent vers le bas, les panels bas ouvrent vers le haut. Les panels gauche/droite s'adaptent selon l'espace horizontal.
Live preview
Abrasif STF D125 P120
Festool — Libre service
Abrasif STF D150 P80
Festool — Libre service
Adhésif Delta Inside
Festool — Libre service
Adaptateur AD-3/8 FF
Festool — Libre service
Abrasif Wing Grain 120
Festool — Libre service
Adheflex 295 Dispenser
Festool — Libre service
En mode masonry les hauteurs naturelles sont préservées — remarque les items 2 et 5 plus hauts