123 Design StudioLe bento grid est passé d'une métaphore de boîte à repas japonaise à l'un des patterns de mise en page les plus copiés du web, et Apple y est pour beaucoup. Depuis que ses pages produit ont rangé les fonctionnalités en compartiments soignés et variés, chaque landing SaaS et chaque dashboard veut le même look. Bien employé, le bento grid est vraiment utile ; en simple décoration, c'est juste une grille classique déguisée.
Voici le regard d'un studio sur le bento grid : ce que c'est vraiment, quand ça marche, quel contenu y entre, et une recette CSS responsive à adapter.
Ce qu'est réellement un bento grid
Un bento grid est une disposition de cellules de tailles variées — certaines larges, d'autres hautes, d'autres carrées — serrées dans une grille modulaire, comme les compartiments d'une boîte bento. Chaque cellule porte une idée autonome : une fonctionnalité, une stat, une image, une citation. La variété des tailles crée du rythme et permet de signaler l'importance par l'échelle.
Il se distingue d'une simple grille de cartes parce que les cellules diffèrent volontairement en taille et en étendue. Cette asymétrie est tout l'intérêt — et aussi le piège.
Un bento grid gagne sa place quand les cellules diffèrent vraiment en poids. Si tout a la même importance, vous n'avez pas un bento ; vous avez une grille qui fait semblant.
Quand le bento grid marche
- Aperçus de fonctionnalités : résumer les capacités d'un produit d'un coup d'œil, le cas Apple.
- Dashboards : mêler une grande métrique primaire à des tuiles secondaires.
- Héros marketing : une grande cellule manifeste à côté de plusieurs preuves plus petites.
- Portfolios : présenter des projets d'échelles différentes sans forcer des vignettes uniformes.
Quand ça échoue
- Contenu uniforme : dix éléments de poids égal forcés dans des cellules variées paraît arbitraire et bruyant.
- Lecture longue : le bento fragmente l'attention ; c'est un dispositif de résumé, pas un format de lecture.
- Mobile à l'étroit : un beau bento desktop qui s'effondre mal en pile est un échec fréquent.
Le contenu qui entre dans une cellule
La discipline : une idée par cellule, dimensionnée à son importance. Un bon contenu de cellule est court et autonome :
- Une seule fonctionnalité avec une icône et une ligne de texte.
- Une statistique phare formulée qualitativement, jamais un chiffre inventé.
- Une capture produit ou une seule image forte.
- Un court témoignage ou une citation en exergue.
Si une cellule a besoin de trois paragraphes, elle n'a pas sa place dans un bento. Mettez un lien à la place.
Une recette CSS responsive
L'approche moderne la plus propre utilise CSS Grid avec des zones nommées ou étendues. Partez d'une grille multi-colonnes et laissez certaines cellules s'étendre sur plus de colonnes ou de lignes. Un point de départ compact : display: grid sur le conteneur, des colonnes avec grid-template-columns: repeat(4, 1fr) et un gap confortable, puis on promeut les cellules vedettes avec grid-column: span 2 ou grid-row: span 2.
- Utilisez
grid-auto-rowsavec une unité de base pour que les cellules hautes s'empilent prévisiblement. - Passez à
grid-template-areaspour une disposition fixe et dirigée que vous réécrivez par breakpoint. - Laissez
repeat(auto-fit, minmax(min, 1fr))gérer le reflux fluide quand l'arrangement exact compte moins que l'occupation de l'espace.
Stratégie responsive à chaque breakpoint
| Breakpoint | Geste de mise en page |
|---|---|
| Mobile | Une colonne ; chaque cellule pleine largeur, ordonnée par priorité |
| Tablette | Deux colonnes ; promouvoir une ou deux cellules héros sur toute la largeur |
| Desktop | Trois à quatre colonnes ; bento complet avec des spans délibérés |
Erreurs courantes à éviter
- Forcer chaque section en bento parce que c'est tendance.
- Laisser les tailles de cellules contredire la vraie hiérarchie du contenu.
- Sur-décorer les cellules de bordures, ombres et dégradés jusqu'au fouillis.
- Ignorer l'ordre clavier et lecteur d'écran quand ordre visuel et ordre DOM divergent.
Le verdict
Le bento grid est un pattern fort et vraiment utile pour résumer un contenu hétérogène avec rythme et hiérarchie claire. Ce n'est ni un défaut par défaut ni une personnalité — c'est un outil. Sortez-le quand votre contenu varie naturellement en poids, designez la pile mobile d'abord, gardez une idée par cellule, et ne laissez jamais la boîte dicter un contenu que vous n'avez pas. Faites ça, et votre bento paraît intentionnel plutôt qu'imité.