How to Build an Asymmetric Bento Grid Layout Like a Senior Developer With CSS Grid & Flexbox

If you've ever looked at a site like Apple, Stripe, or a modern SaaS landing page and wondered how they get boxes of different sizes to line up so perfectly, that's a bento grid layout, and it's the #4 CSS layout every developer needs in their toolkit.

In this tutorial, I'll break down exactly how to build one from scratch using nothing but CSS Grid and Flexbox, no frameworks, no libraries, by recreating a real furniture e-commerce UI called WOOLEN, component by component.

📺 Prefer to watch instead? Full step-by-step build here

What You'll Learn

• The one CSS Grid rule that creates asymmetric ("bento") layouts
• When to reach for Grid vs. Flexbox (and why you usually need both)
• Nested CSS Grid for complex, multi-section UIs
• Glassmorphism styling with backdrop-filter
• Fully responsive design — without rewriting your HTML

The Core Rule: Grid for Skeleton, Flexbox for Content

Before touching any code, remember this rule, it will save you from 90% of layout confusion:

Use CSS Grid for the big two-dimensional skeleton (rows AND columns). Use Flexbox for the one-dimensional content living inside each grid cell.

If you want to go deeper and build full responsive pages faster (not just isolated patterns), I put together a complete guide Build Any Responsive Layout Faster with Grid and Flexbox that walks through building real pages component by component. Worth a look if this post is useful to you.

Step 1: The Asymmetric Grid Ratio (the actual "bento" secret)

The entire asymmetric look comes down to one line:

\css
.main-bento-grid {
display: grid;
grid-template-columns: 1fr 1.65fr;
gap: 14px;
}
\\

fr is a Grid-only unit meaning "a fraction of remaining space." 1fr 1.65fr splits the row into 2.65 shares total, column 1 gets 1 share (~38%), column 2 gets 1.65 shares (~62%). No manual percentage math, and it stays proportional at every screen size.

That's it. That single line is the difference between a boring equal-column layout and a genuine bento layout.

Step 2: Nesting Grids Inside Grid Cells

Real bento layouts aren't one giant grid, they're small grids nested inside grid cells, as deep as the design needs:

\css
.right-bento-column {
display: grid;
grid-template-rows: auto 1fr;
gap: 14px;
}
\\

This lets the promo row stay compact (auto) while the popular-items section stretches (1fr) to match the hero card's height.

Step 3: Flexbox Handles Everything Inside

Once the skeleton exists, every piece of content alignment, header items, button icon+label pairs, card headers, is a simple Flexbox row or column:

\css
.site-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
\\

Step 4: Equal Columns with repeat()

For evenly-sized card grids (like a 3-up product row), skip typing 1fr three times:

\css
.popular-cards-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
\\

Step 5: Responsiveness — No HTML Changes Required

The most important lesson for responsive Grid layouts: you don't need different markup for mobile, you just redeclare grid-template-columns inside a media query:

\css
@media (max-width: 767px) {
.main-bento-grid {
grid-template-columns: 1fr;
}
}
\\

Every child automatically re-flows into a single column — the entire "make it responsive" move for the whole layout.

Recap

1. CSS Grid builds every skeleton, the outer bento grid, the nested right column, the product/footer grids.
2. Flexbox handles every piece of content alignment inside those grid cells.
3. Asymmetry comes from feeding Grid unequal fr ratios instead of equal ones.
4. Responsiveness is just re-declaring grid-template-columns inside media queries.

Watch the full build (with live coding + explanations) here 👇

{https://youtu.be/OzxmaUChWLM}

---

If you want to master responsive layouts faster, check out my guide "Build Any Responsive Layout with CSS Grid & Flexbox"

link to my YouTube channel

Follow me here on DEV and subscribe on YouTube for the rest of this CSS layouts series 🚀