Introduction au Bento Grid
Le Bento Grid tire son nom des boites a bento japonaises, ces repas compartimentes ou chaque element occupe un espace defini mais harmonieux. Apple a popularise ce style de layout lors de ses keynotes, presentant les fonctionnalites de ses produits dans des grilles asymetriques visuellement saisissantes.
Contrairement aux grilles uniformes traditionnelles, le Bento Grid joue sur les contrastes de tailles : des cartes larges cotoient des cartes compactes, creant une hierarchie visuelle naturelle qui guide l'oeil de l'utilisateur vers les elements importants.
Ce layout exploite le principe de hierarchie visuelle : les elements plus grands attirent naturellement l'attention en premier, permettant de mettre en avant vos features principales tout en conservant une vue d'ensemble coherente.
CSS Grid pour layouts asymetriques
CSS Grid est l'outil ideal pour creer des Bento Grids. Contrairement a Flexbox, Grid permet de controler simultanement les lignes ET les colonnes, offrant une liberte de composition inegalee.
Structure de base
Commencons par la structure fondamentale d'un Bento Grid. L'idee est de definir une grille reguliere, puis de faire "deborder" certaines cartes sur plusieurs cellules.
.bento-grid {
display: grid;
/* 4 colonnes de taille egale */
grid-template-columns: repeat(4, 1fr);
/* 3 lignes de 150px */
grid-template-rows: repeat(3, 150px);
gap: 16px;
}
.bento-card {
background: #12121a;
border-radius: 16px;
padding: 24px;
border: 1px solid rgba(255,255,255,0.08);
}
/* Carte large : 2 colonnes x 2 lignes */
.bento-card.large {
grid-column: span 2;
grid-row: span 2;
}
/* Carte horizontale : 2 colonnes */
.bento-card.wide {
grid-column: span 2;
}
/* Carte verticale : 2 lignes */
.bento-card.tall {
grid-row: span 2;
}Comprendre grid-column et grid-row
Les proprietes grid-column et grid-row controlent l'etendue de chaque element dans la grille :
span 2: l'element occupe 2 cellules dans cette direction1 / 3: l'element commence a la ligne 1 et finit a la ligne 31 / -1: l'element s'etend de la premiere a la derniere ligne
/* Placement explicite */
.featured-card {
/* Colonnes 1 a 3 (2 colonnes) */
grid-column: 1 / 3;
/* Lignes 1 a 3 (2 lignes) */
grid-row: 1 / 3;
}
/* Carte pleine largeur */
.full-width {
grid-column: 1 / -1; /* Debut a fin */
}
/* Placement automatique avec span */
.auto-large {
grid-column: span 2;
grid-row: span 2;
}grid-template-areas pour composition
Pour des layouts plus complexes ou vous souhaitez un controle precis sur le placement, grid-template-areas offre une syntaxe visuelle et intuitive.
.bento-layout {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 120px);
gap: 16px;
/* Definition visuelle du layout */
grid-template-areas:
"feature feature sidebar"
"feature feature small1"
"wide wide small2";
}
/* Attribution des zones */
.card-feature { grid-area: feature; }
.card-sidebar { grid-area: sidebar; }
.card-small1 { grid-area: small1; }
.card-small2 { grid-area: small2; }
.card-wide { grid-area: wide; }Cette approche rend le layout lisible d'un coup d'oeil. Vous "dessinez" litteralement votre grille avec des noms, ce qui facilite la maintenance et les modifications.
Cartes de differentes tailles
La cle d'un Bento Grid reussi reside dans la variete des tailles. Chaque type de carte a son role dans la hierarchie visuelle.
Carte Feature (Hero)
La carte principale, souvent en haut a gauche, attire immediatement l'attention. Elle presente le message le plus important.
.bento-card.feature {
grid-column: span 2;
grid-row: span 2;
/* Style distinctif */
background: linear-gradient(
135deg,
#6366f1 0%,
#8b5cf6 100%
);
border: none;
/* Typographie plus grande */
font-size: 1.25rem;
}
.bento-card.feature .icon {
font-size: 3rem;
margin-bottom: 24px;
}
.bento-card.feature h3 {
font-size: 1.5rem;
font-weight: 800;
}Carte Wide (Horizontale)
Parfaite pour les messages qui necessitent de l'espace horizontal, comme des statistiques comparatives ou des timelines.
.bento-card.wide {
grid-column: span 2;
/* Layout interne horizontal */
display: flex;
align-items: center;
gap: 24px;
}
.bento-card.wide .content {
flex: 1;
}
.bento-card.wide .visual {
width: 120px;
height: 120px;
flex-shrink: 0;
}Carte Tall (Verticale)
Ideale pour les contenus qui se lisent de haut en bas : listes, etapes, ou graphiques verticaux.
.bento-card.tall {
grid-row: span 2;
/* Layout vertical */
display: flex;
flex-direction: column;
justify-content: space-between;
}
.bento-card.tall .top {
/* Contenu en haut */
}
.bento-card.tall .bottom {
margin-top: auto;
}Animations au hover
Les animations au survol donnent vie a votre Bento Grid. Elles fournissent un feedback visuel et renforcent l'interactivite.
Scale et elevation
L'effet le plus courant combine un leger agrandissement avec une elevation (ombre portee).
.bento-card {
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.bento-card:hover {
/* Leger agrandissement + elevation */
transform: scale(1.02) translateY(-4px);
/* Ombre portee */
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.3);
/* Bordure coloree */
border-color: rgba(99, 102, 241, 0.5);
}Effet Glow au hover
Un effet de lueur sous la carte cree un rendu premium tres apprecie.
.bento-card {
position: relative;
}
/* Pseudo-element pour le glow */
.bento-card::after {
content: '';
position: absolute;
inset: -1px;
border-radius: inherit;
background: linear-gradient(
135deg,
#6366f1,
#8b5cf6
);
z-index: -1;
opacity: 0;
filter: blur(15px);
transition: opacity 0.4s;
}
.bento-card:hover::after {
opacity: 0.5;
}Animation d'entree decalee
Pour un effet "wow" au chargement, animez l'apparition des cartes avec un delai progressif.
.bento-card {
opacity: 0;
transform: translateY(20px);
animation: bentoEntrance 0.6s ease-out forwards;
}
/* Delai progressif */
.bento-card:nth-child(1) { animation-delay: 0.1s; }
.bento-card:nth-child(2) { animation-delay: 0.2s; }
.bento-card:nth-child(3) { animation-delay: 0.3s; }
.bento-card:nth-child(4) { animation-delay: 0.4s; }
.bento-card:nth-child(5) { animation-delay: 0.5s; }
.bento-card:nth-child(6) { animation-delay: 0.6s; }
@keyframes bentoEntrance {
to {
opacity: 1;
transform: translateY(0);
}
}Privilegiez transform et opacity pour vos animations. Ces proprietes sont optimisees par le GPU et ne declenchent pas de recalcul du layout.
Responsive : reorganisation automatique
Un Bento Grid doit s'adapter elegamment a toutes les tailles d'ecran. La strategie consiste a reduire le nombre de colonnes et simplifier la disposition sur mobile.
/* Desktop : 4 colonnes */
.bento-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
/* Tablette : 2 colonnes */
@media (max-width: 1024px) {
.bento-grid {
grid-template-columns: repeat(2, 1fr);
}
/* Adapter les zones nommees */
.bento-layout {
grid-template-areas:
"feature feature"
"sidebar small1"
"wide wide"
"small2 small2";
}
}
/* Mobile : 1 colonne */
@media (max-width: 768px) {
.bento-grid {
grid-template-columns: 1fr;
}
/* Toutes les cartes en pleine largeur */
.bento-card.large,
.bento-card.wide,
.bento-card.tall {
grid-column: span 1;
grid-row: span 1;
}
.bento-layout {
grid-template-areas:
"feature"
"sidebar"
"small1"
"wide"
"small2";
}
}Auto-fit pour grilles fluides
Pour une approche encore plus flexible, utilisez auto-fit avec minmax().
.bento-auto {
display: grid;
/* Colonnes de min 250px, max 1fr */
grid-template-columns: repeat(
auto-fit,
minmax(250px, 1fr)
);
grid-auto-rows: 150px;
gap: 16px;
}Exemples inspires d'Apple, Vercel, Linear
Analysons les styles de trois entreprises qui excellent dans l'utilisation du Bento Grid.
Style Apple
Apple privilegie les grands visuels, les couleurs vives et une typographie epuree. Les cartes sont souvent sur fond de gradient.
Style Linear
Linear adopte un style minimaliste avec des bordures subtiles, peu de couleurs, et beaucoup d'espace blanc.
Style Vercel
Vercel utilise souvent des grilles avec des bordures partagees (gap de 1px) creant un effet de tableau moderne.
/* Style Vercel : bordures partagees */
.bento-vercel {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: rgba(255,255,255,0.08);
border-radius: 16px;
overflow: hidden;
}
.bento-vercel .bento-card {
border-radius: 0;
border: none;
background: #0a0a0f;
}Bonnes pratiques
Pour creer des Bento Grids efficaces, gardez ces principes en tete :
Hierarchie visuelle
- Une seule carte "hero" : la plus grande, elle porte le message principal
- 2-3 cartes moyennes : les features secondaires importantes
- Plusieurs petites cartes : details et informations complementaires
Equilibre
- Evitez de placer toutes les grandes cartes d'un cote
- Alternez les couleurs et les tailles
- Laissez "respirer" le contenu avec du padding genereux
Accessibilite
/* Respecter les preferences utilisateur */
@media (prefers-reduced-motion: reduce) {
.bento-card {
animation: none;
transition: none;
}
}
/* Focus visible pour navigation clavier */
.bento-card:focus-visible {
outline: 2px solid #6366f1;
outline-offset: 2px;
}Conclusion
Le Bento Grid est bien plus qu'une tendance design : c'est une approche puissante pour organiser l'information de maniere hierarchique et visuellement engageante.
En combinant CSS Grid avec des animations subtiles et une strategie responsive solide, vous pouvez creer des layouts qui rivalisent avec ceux d'Apple, Linear ou Vercel.
Les cles du succes :
- Maitrisez
grid-template-areaspour des layouts complexes - Variez les tailles pour creer une hierarchie claire
- Animez avec parcimonie mais avec elegance
- Pensez mobile-first : simplifiez sur petit ecran
Explorez notre bibliotheque d'effets pour decouvrir des Bento Grids prets a l'emploi avec code copiable en un clic.