Responsive Bento
Grille CSS auto-fit/dense : les cellules à empans multiples se réorganisent élégamment quand le conteneur rétrécit — zéro JavaScript.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Cartes comprend 41 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La propriété centrale est grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)) sur .bento-responsive. Le moteur CSS calcule lui-même combien de colonnes de 80 px tiennent dans la largeur disponible : quand la place d'une colonne disparaît, toutes les colonnes s'élargissent d'un coup et chaque cellule recalcule sa position — sans JavaScript, sans media query.
grid-auto-flow: dense active l'algorithme de remplissage dense : quand une cellule multi-empan (2×2, 2×1 ou 1×2) laisse un trou, le navigateur y glisse la première cellule plus petite qui suit dans le DOM. Le layout reste compact à toutes les largeurs.
Trois classes de span déclarent la taille de chaque tuile : .cell-large avec grid-area: span 2 / span 2, .cell-wide avec grid-column: span 2 et .cell-tall avec grid-row: span 2. La transition: .5s cubic-bezier(.16, 1, .3, 1) rend visible le saut de position au moment du changement de nombre de colonnes.
Le conteneur porte resize: horizontal et overflow: auto pour la démo : l'utilisateur tire la poignée bas-droite et observe la réorganisation en temps réel. En production, supprimez ces deux propriétés — la grille s'adapte seule à la largeur de son parent.
Accessibilité
- Pas de prefers-reduced-motion : le code ne contient aucun bloc
@media (prefers-reduced-motion: reduce). La transition CSS se déclenche systématiquement lors du reflow. À neutraliser en production avec@media (prefers-reduced-motion: reduce) { .bento-responsive .bento-cell { transition: none } }. - Contraste texte :
var(--text-secondary)(#a1a1aa) survar(--bg-card)(#12121a) → ratio ≈ 7,5:1, conforme WCAG AA (seuil 4,5:1 pour le texte courant). - Aucun élément interactif dans la grille de base — pas de focus-trap, pas de problème de navigation au clavier pour ce composant statique.
- La poignée
resize: horizontaln'est accessible qu'à la souris, pas au clavier. En production, laissez le conteneur suivre son parent et testez avec les DevTools ou en redimensionnant la fenêtre. - Aucun
roleniaria-labelsur la grille. Pour un contenu sémantique, ajoutezrole="list"sur.bento-gridetrole="listitem"sur chaque.bento-cell.
Compatibilité navigateur
Nécessite CSS Grid avec auto-fit et minmax — disponible dans tous les navigateurs modernes depuis 2017.
Sans support CSS Grid, les cellules s'affichent en flux bloc normal — aucune erreur JS, la page reste lisible. La poignée resize: horizontal est ignorée par Safari et tous les appareils mobiles ; la grille s'adapte quand même par sa largeur naturelle.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="bento-responsive-container">
<div class="bento-grid bento-responsive">
<div class="bento-cell cell-large">…</div>
<div class="bento-cell cell-wide">…</div>
<div class="bento-cell cell-tall">…</div>
<div class="bento-cell cell-small">…</div>
<div class="bento-cell cell-small">…</div>
<div class="bento-cell cell-wide">…</div>
<div class="bento-cell cell-small">…</div>
<div class="bento-cell cell-small">…</div>
</div>
<span class="resize-hint">Redimensionner</span>
</div>HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| minmax(80px, 1fr) | 80px | Largeur minimale d'une colonne avant que auto-fit recalcule. Augmentez (ex. 120px) pour des tuiles plus larges et moins de colonnes ; réduisez pour un effet mosaïque plus dense. À modifier dans la règle .bento-responsive. |
| grid-auto-rows: 60px | 60px | Hauteur de chaque unité de rangée. Augmentez pour des tuiles plus hautes — les classes cell-large (2 rangs) et cell-tall (2 rangs) s'adaptent proportionnellement. |
| gap: 12px | 12px | Espacement entre les tuiles. Réduisez à 8px pour un rendu plus compact, augmentez à 20px pour un layout aéré premium. |
| transition: .5s cubic-bezier(.16, 1, .3, 1) | .5s | Durée et easing du déplacement lors du reflow. Raccourcissez à .2s pour un snap sec, supprimez la ligne pour un repositionnement instantané. |
| --bg-card | #12121a | Fond des tuiles neutres (cell-small sans gradient). Remplacez par votre couleur brand ou une teinte de fond page légèrement élevée. |
| --border | rgba(255,255,255,0.08) | Liseré des tuiles. Augmentez l'opacité (0.15–0.2) pour plus de définition, passez à une couleur unie pour un accent design. |
| grid-area: span 2 / span 2 | cell-large | Modifiez les spans dans .cell-large, .cell-wide et .cell-tall pour créer des formats custom (ex. span 3 / span 1 pour une tuile très haute sur 3 rangs). |
FAQ
resize: horizontal et overflow: auto sur le conteneur sont un gadget de démo pour observer le reflow en glissant la poignée. En production, supprimez ces deux propriétés et laissez le conteneur suivre la largeur de son parent : la grille auto-fit s'adapte seule. Pour tester, redimensionnez la fenêtre ou utilisez les DevTools (vue responsive).auto-fit recalcule le nombre de colonnes d'un seul coup à chaque seuil : toutes les cellules se repositionnent simultanément. L'algorithme dense choisit ensuite le meilleur emplacement libre, pas nécessairement le même qu'à la largeur précédente. Pour fixer la position d'une tuile clé, donnez-lui une grid-area nommée (ex. grid-area: hero) au lieu d'un simple span..bento-cell est un conteneur flex standard. Ajoutez background-image avec background-size: cover pour une photo, ou insérez n'importe quel composant (graphique, carte, vidéo). L'effet est 100 % CSS vanilla : il fonctionne dans React, Vue, Svelte ou Angular sans aucune modification.
