Introduction to the Bento Grid
The Bento Grid takes its name from Japanese bento boxes, those compartmentalized meals where each element occupies a defined but harmonious space. Apple popularized this layout style at its keynotes, presenting product features in visually striking asymmetric grids.
Unlike traditional uniform grids, the Bento Grid plays on size contrasts: wide cards sit alongside compact cards, creating a natural visual hierarchy that guides the user's eye towards important elements.
This layout exploits the principle of visual hierarchy: larger elements naturally attract attention first, allowing you to highlight your main features while maintaining a coherent overall view.
CSS Grid for asymmetric layouts
CSS Grid is the ideal tool for creating Bento Grids. Unlike Flexbox, Grid allows controlling rows AND columns simultaneously, offering unmatched compositional freedom.
Basic structure
Let's start with the fundamental structure of a Bento Grid. The idea is to define a regular grid, then make certain cards "overflow" across multiple cells.
.bento-grid {
display: grid;
/* 4 equal-size columns */
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);
}
/* Large card: 2 columns x 2 rows */
.bento-card.large {
grid-column: span 2;
grid-row: span 2;
}
/* Horizontal card: 2 columns */
.bento-card.wide {
grid-column: span 2;
}
/* Vertical card: 2 rows */
.bento-card.tall {
grid-row: span 2;
}Understanding grid-column and grid-row
The grid-column and grid-row properties control the extent of each element in the grid:
span 2: the element occupies 2 cells in this direction1 / 3: the element starts at line 1 and ends at line 31 / -1: the element spans from the first to the last line
/* Placement explicite */
.featured-card {
/* Colonnes 1 a 3 (2 colonnes) */
grid-column: 1 / 3;
/* Lignes 1 a 3 (2 lignes) */
grid-row: 1 / 3;
}
/* Full width card */
.full-width {
grid-column: 1 / -1; /* Start to end */
}
/* Automatic placement with span */
.auto-large {
grid-column: span 2;
grid-row: span 2;
}grid-template-areas for composition
For more complex layouts where you want precise control over placement, grid-template-areas offers a visual and intuitive syntax.
.bento-layout {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 120px);
gap: 16px;
/* Visual layout definition */
grid-template-areas:
"feature feature sidebar"
"feature feature small1"
"wide wide small2";
}
/* Zone attribution */
.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; }This approach makes the layout readable at a glance. You literally "draw" your grid with names, which makes maintenance and modifications easier.
Cards of different sizes
The key to a successful Bento Grid lies in the variety of sizes. Each card type has its role in the visual hierarchy.
Feature Card (Hero)
The main card, often in the top left, immediately draws attention. It presents the most important message.
.bento-card.feature {
grid-column: span 2;
grid-row: span 2;
/* Style distinctif */
background: linear-gradient(
135deg,
#6366f1 0%,
#8b5cf6 100%
);
border: none;
/* Larger typography */
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;
}Wide Card (Horizontal)
Perfect for messages that require horizontal space, such as comparative statistics or timelines.
.bento-card.wide {
grid-column: span 2;
/* Horizontal internal layout */
display: flex;
align-items: center;
gap: 24px;
}
.bento-card.wide .content {
flex: 1;
}
.bento-card.wide .visual {
width: 120px;
height: 120px;
flex-shrink: 0;
}Tall Card (Vertical)
Ideal for content that reads top to bottom: lists, steps, or vertical charts.
.bento-card.tall {
grid-row: span 2;
/* Layout vertical */
display: flex;
flex-direction: column;
justify-content: space-between;
}
.bento-card.tall .top {
/* Content at top */
}
.bento-card.tall .bottom {
margin-top: auto;
}Hover animations
Hover animations bring your Bento Grid to life. They provide visual feedback and reinforce interactivity.
Scale and elevation
The most common effect combines a slight enlargement with an elevation (drop shadow).
.bento-card {
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.bento-card:hover {
/* Slight scale up + elevation */
transform: scale(1.02) translateY(-4px);
/* Drop shadow */
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.3);
/* Colored border */
border-color: rgba(99, 102, 241, 0.5);
}Glow effect on hover
A glow effect under the card creates a highly appreciated premium rendering.
.bento-card {
position: relative;
}
/* Pseudo-element for the 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;
}Staggered entry animation
For a "wow" effect on load, animate the appearance of cards with a progressive delay.
.bento-card {
opacity: 0;
transform: translateY(20px);
animation: bentoEntrance 0.6s ease-out forwards;
}
/* Progressive delay */
.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);
}
}Prioritize transform and opacity for your animations. These properties are GPU-optimized and do not trigger layout recalculation.
Responsive: automatic reorganization
A Bento Grid must adapt elegantly to all screen sizes. The strategy consists of reducing the number of columns and simplifying the layout on 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);
}
/* Adapt named zones */
.bento-layout {
grid-template-areas:
"feature feature"
"sidebar small1"
"wide wide"
"small2 small2";
}
}
/* Mobile: 1 column */
@media (max-width: 768px) {
.bento-grid {
grid-template-columns: 1fr;
}
/* All cards full width */
.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 for fluid grids
For an even more flexible approach, use auto-fit with minmax().
.bento-auto {
display: grid;
/* Columns min 250px, max 1fr */
grid-template-columns: repeat(
auto-fit,
minmax(250px, 1fr)
);
grid-auto-rows: 150px;
gap: 16px;
}Examples inspired by Apple, Vercel, Linear
Let's analyze the styles of three companies that excel in the use of the Bento Grid.
Apple style
Apple favors large visuals, vivid colors and clean typography. Cards are often on a gradient background.
Linear style
Linear adopts a minimalist style with subtle borders, few colors, and lots of white space.
Vercel style
Vercel often uses grids with shared borders (1px gap) creating a modern table effect.
/* Vercel style : 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;
}Best practices
To create effective Bento Grids, keep these principles in mind:
Visual hierarchy
- A single "hero" card: the largest, it carries the main message
- 2-3 medium cards: the important secondary features
- Multiple small cards: details and complementary information
Balance
- Avoid placing all large cards on one side
- Alternate colors and sizes
- Let the content "breathe" with generous padding
Accessibility
/* Respect user preferences */
@media (prefers-reduced-motion: reduce) {
.bento-card {
animation: none;
transition: none;
}
}
/* Visible focus for keyboard navigation */
.bento-card:focus-visible {
outline: 2px solid #6366f1;
outline-offset: 2px;
}Conclusion
The Bento Grid is much more than a design trend: it's a powerful approach for organizing information in a hierarchical and visually engaging way.
By combining CSS Grid with subtle animations and a solid responsive strategy, you can create layouts that rival those of Apple, Linear or Vercel.
The keys to success:
- Master
grid-template-areasfor complex layouts - Vary the sizes to create a clear hierarchy
- Animate sparingly but with elegance
- Think mobile-first: simplify on small screens
Explore our effects library to discover ready-to-use Bento Grids with one-click copyable code.